VUE3（五）vue路由vue-router4 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 = https://www.it610.com/article/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
有好的建议，请在下方输入你的评论。
【VUE3（五）vue路由vue-router4】欢迎访问个人博客
https://guanchao.site