vue的路由设置小结
vue的路由设置小结
// 异步路由的编写示例。其中针对component字段进行懒加载及分块处理，提升首屏加载速度的同时，也可以手动控制让某些页面合并到一个单独的js文件中，而不是每个页面都是一个js。
//完整解释请参考官方文档：vue-router懒加载 https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
// const asyncRouter = [
// {
// path: '/asyncRouter',
// component: r => require.ensure([], () => r(require('../page/layout/layout')), 'layout'),
// children: []
// },
// {
// path: '/table',
// component: r => require.ensure([], () => r(require('../page/table/table')), 'table')
// },
// {
// path: '/form',
// component: r => require.ensure([], () => r(require('../page/form/form')), 'form'),
// }
// ]
/**
* vue.js 接收url参数
1) 路由配置传参方式
在配置路由时 例如 "/system/authorize/:uid/:uname/:token"
页面url为 http://XXX.com/firewall/authorize/23/zhangman/232454
js 接收方式 this.$route.params.uid,
2) ?传参方式
例 http://XXX.com/system/authorize?uid=12&uname=zhangman&token=23243
js 接收方式 this.$route.query.uid
*/
/**
* 设计一个route的全局钩子，用来进行每一次跳转的必要动作处理
* 利用beforeEach
* 路由的钩子函数一共有三个点可以写：1. 全局（beforEach),2. 局部路由（beforeRouteEnter）,3. 组件内（beforeRouteEnter）
* 一般来讲用1和2就可以了，3的使用要看具体需求
* Tips:next 方法决定了你是进入（本来就打算去的）下一个导航，还是中断这个操作，还是跳到其他新的导航。
* 此处的程序处理涉及App状态的，可以自行建立机制，不过最好使用官方推荐的vuex
* 我们已经在state目录建立了Vuex的加载和使用。相关身份验证可以在此处进行
*/
router.beforeEach(({meta, path}, from, next) => {
// 此处可以依据不同路由的切换，制定一系列策略进行处理
next()
// if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
// if (store.state.token) { // 通过vuex state获取当前的token是否存在
// next();
// }
// else {
// next({
// path: '/login',
// query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
// })
// }
// }
// else {
// next();
// }
});
