// 导入vue-router对象
import VueRouter from "vue-router";
import Hebei from "../pages/hebei.vue";
import Henan from "../pages/henan.vue";
import City from "../pages/city.vue";
// 创建路由器对象(在这个路由器对象中配置路由)
const router = new VueRouter({
// 在这里配置所有的路由规则
routes : [
// 这就是一个路由
{
// 路由由path和component组成
// 这个看作key
// 只要路径检测到的是/hebei就切换到这个组件
path : "/hebei",
// 这个就是路由的value,路由的value是一个组件
component : Hebei,
// children子路由
children : [
// 配置子路由
{
// 对于子路由来说,path不用添加/,以/开始
// 系统会自动添加
// path : "/hebei/shijiazhuang",
name : "shi",
path : "sjz/:a1/:a2/:a3",
// :形式可以将后续的内容视为数据
component : City,
// 在路由中进行的配置
// props : {
// x : 'Jack',
// y : 'Rose'
// }
// props含有函数式写法
// props($route){
// // 当前路由对象会被自动传递过来
// // 将来取值时会自动调用函数
// // 调用这个函数对象会获取到当前路由对象
// return {
// a1 : $route.params.a1,
// a2 : $route.params.a2,
// a3 : $route.params.a3
// }
// // 需要在方法最后返回对象
// }
// 这种方式只支持params方式的传参,不支持query方式
// 原理是将params直接内部转为props对象
props : true,
// 给路由对象添加自定义属性的话,需要在路由对象的meta路由源中定义
// 需要鉴权的属性
meta : {isAuth : true}
},
{
// 可以给路由起名字,用来防止过长导致path写一大串
name : "han",
// 数据是动态传过来的,我们只负责接收,所以两个子路由可以共享一个组件
path : "hd/:a1/:a2/:a3",
component : City,
// props($route){
// return {
// a1 : $route.params.a1,
// a2 : $route.params.a2,
// a3 : $route.params.a3
// }
// }
props : true,
meta : {isAuth : true}
}
]
},
{
path : "/henan",
component : Henan
}
]
});
// 全局前置守卫,在暴露之前创建之后即可
// beforeEach中的callback什么时候被调用呢,在每一次切换任意路由组件之前
// callback没有要求,可以是普通函数也可以是箭头函数
// from是一个路由对象
// callback函数有三个参数,to from next
// from是一个路由对象有name,path,component等属性就是上面的路由对象,这里表示的是起点路由
// to表示往哪去,也是一个路由对象,表示到哪去
// next参数是一个函数,调用这个函数以后,表示放行
router.beforeEach((to,from,next) => {
// 页面初始化的时候,from和to相同
// 每一次切换路由组件都会执行
let loginName = "Jack";
// 目前需要鉴定权限的路由少,如果多会导致这里繁琐
if(to.meta.isAuth){
if(loginName === "Rose"){
// 放行
next();
}
else{
alert("您没有权限");
}
}
else{
// 放行
next();
}
});
// 导出路由器对象
export default router;
标签:VUE,框架,对象,route,params,props,------,path,路由
From: https://blog.51cto.com/u_16322355/8968421