VUE3（五）vue路由vue-router4

使用vue-router，这里特别说明一下，我这里记录的是vue-router文件的编写。及在页面中的使用。

我的站点主要分为三个部分：

1：pc端页面的路由
2：手机端页面的路由
3：后端管理系统的路由

因此，我这里会使用到路由嵌套（子路由）。

具体的用法请参照官方文档：

https://router.vuejs.org/

我这里放一下我当前使用文件得我内容。我使用的基础语言是typescript：

Index.ts

// 引入vue-router对象
import { createRouter, createWebHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=>import('/@/views/404.vue')
  },
  {// 后端管理系统路由组
    path: "/admin",
    redirect: "/admin/home",
    name: "admin",
    component: () => import("/@/views/admin.vue"),
    children: [
        {
            path: "home",
            name: "home",
            meta: { 
              requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
            },
            component: () => import("/@/views/admin/Home.vue")
        },
        {
            path: "setting",
            name: "setting",
            meta: { 
              requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
            },
            component: () => import("/@/views/admin/Setting.vue")
        },
    ]
  },
  {// 博客主站pc端页面路由
    path: "/pc",
    redirect: "/pc/index",
    name: "pc",
    component: () => import("/@/views/pc.vue"),
    children: [
        {
            path: "index",
            name: "首页",
            component: () => import("/@/views/pc/Home.vue"),
        },
    ]
  },
  {// 博客主站手机端页面路由
    path: "/phone",
    redirect: "/phone/pindex",
    name: "phone",
    component: () => import("/@/views/phone.vue"),
    children: [
        {
            path: "pindex",
            name: "Home",
            component: () => import("/@/views/phone/Home.vue")
        },
    ]
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  // hash模式：createWebHashHistory，
  // history模式：createWebHistory
  history: createWebHistory("/"),
  // history:createWebHashHistory(),
  routes,
});
 
/**
 * 路由守卫
 */
router.beforeEach((guard) => {
  beforeEach.checkAuth(guard, router);
});
 
/**
 * 路由错误回调
 */
router.onError((handler: ErrorHandler) => {
  console.log("error:", handler);
});
 
/**
 * 输出对象
 */
export default router;

当然，目前这个文件只能满足最基础的跳转，并且在路由首位中添加了404页跳转。以上基本都有注释，参考就好。

在页面中使用：

Vue3,是可以和vue2一样将router挂载至vue对象上的。

但是，官方不建议这么做，因此呢，vue-router是每个单页分别引入的。

大概是这个样子：

import { useRouter, useRoute } from "vue-router";
export default {
    name: "article,
    components: {},
    // VUE3 语法 第一个执行的钩子函数
    // setup官方文档
    // https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#参数
    setup(props: any, content: any) {
        // 实例化路由
        var router = useRouter();
       // 路由参数
        var route = useRoute();
        /**
         * @name: 声明data
         * @author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-01-18
         */
        const data = reactive({
            // 文章id
            article_id: route.query.article_id ? route.query.article_id : 0,
        });
/**
         * @name: 子分类显示
         * @author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-01-15          */
        const cateSonShow = (cate_id_son:number) =>{
            data.cate_id_son = cate_id_son;
            router.push(
            {
                path: '/pc/articleList',
                // 路由query传参
                query: {
                    cate_id_son: data.cate_id_son
                }
            });
        }
}

更多关于vue-router4的功能，请参考官方文档：

https://next.router.vuejs.org/installation.html

具体代码实现，请参考我的代码vue3代码库：https://gitee.com/camelliass/vue3blog

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site