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();

// }

});

巴特西

vue的路由设置小结

最新文章

热门文章