// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
{
name: "guanyu",
path: "/about",
component: About,
meta: { isAuth: true, title: "关于" }
},
{
name: "zhuye",
path: "/home",
component: Home,
meta: { title: "主页" },
children: [
{
name: "xinwen",
path: "news",
component: News,
meta: { isAuth: true, title: "新闻" },
beforeEnter: (to, from, next) => {
//独享路由组件
if (to.meta.isAuth) {
if (localStorage.getItem("school") === "yu1") {
next();
} else {
alert("无权限查看");
}
} else {
next();
}
}
},
{
name: "xiaoxi",
path: "message",
component: Message,
meta: { isAuth: true, title: "消息" },
children: [
{
name: "xiangqing",
path: "detail",
component: Detail,
meta: { isAuth: true, title: "详情" },
//props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件。
// props:{a:1,b:'hello'}
//props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件。
// props:true
//props的第三种写法,值为函数
props($route) {
return {
id: $route.query.id,
title: $route.query.title,
a: 1,
b: "hello"
};
}
}
]
}
]
}
]
});
独享路由守卫;
//全局前置路由守卫---每次路由切换之前调用、每次路由初始化被调用
router.beforeEach((to, from, next) => {
if (to.meta.isAuth) {
if (localStorage.getItem("school") === "yu") {
next();
} else {
alert("无权限查看");
}
} else {
next();
}
});
//全局后置路由守卫---每次路由切换之前调用、每次路由初始化被调用
router.afterEach(to => {
if (to.meta.title) {
document.title = to.meta.title;
} else {
document.title = "主页";
}
});
export default router;
内嵌式路由守卫
//通过路由规则,进入该组件是被调用
beforeRouteEnter(to, from, next) {
if (to.meta.isAuth) {
if (localStorage.getItem("school") === "yu1") {
next();
} else {
alert("无权限查看");
}
} else {
next();
}
},
//通过路由规则,离开该组件是被调用
beforeRouteLeave(to, from, next) {
// ...
next()
},