使用vue-router，这里特别说明一下，我这里记录的是vue-router文件的编写。及在页面中的使用。
我的站点主要分为三个部分：
1：pc端页面的路由
2：手机端页面的路由
3：后端管理系统的路由
因此，我这里会使用到路由嵌套（子路由）。
具体的用法请参照官方文档：
我这里放一下我当前使用文件得我内容。我使用的基础语言是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
