基本的vue-router （router文件夹下的js）
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
path: '/',
redirect: '/login' // 重定向的地址
},
{
path: '/login',
name: 'login',
component: () => import('../views/Login.vue')
},
{
path: '/home',
name: 'home',
component: () => import('../views/Home.vue')
//在home下面加载二级路由
children: [
//默认首页
{
path: 'index',
name: 'index',
component: () => import('../views/Index.vue'),
}
]
]
// 根据路线配置，创建路由实例，并导出
export default router = new Router({
routes
})
路由元信息
const routes = [
{
path: '/',
name: 'home',
component: () => import('../views/Home.vue')
// 这就是路由元信息
meta: { requiresAuth: true}
}
]
- 用来标记这个路由信息是否需要检测，true 表示要检测，false 表示不需要检测
- requiresAuth 是自己起的字段名称
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'home',
component: () => import('../views/Home.vue')
// 这就是路由元信息
meta: { requiresAuth: true}
}
]
// 页面刷新时，重新赋值 token
if (window.localStorage.getItem('token')) {
store.state.user = window.localStorage.getItem('token')
}
const router = new Router({
routes
})
// 在路由更新之前都去遍历路由的meta元信息, 判断有没有requiresAuth
router.beforeEach((to, from, next) => {
// 如果有requiresAuth, 则开始验证
if (to.matched.some(record => record.meta.requiresAuth)) {
// 如果验证不通过, 则重定向到login页面
if (!store.state.token) {
next({
path: '/login',
query: {
redirect: to.fullPath
}
})
} else {
next()
}
} else {
next() // 这个 next() 不要忘记了
}
})
export default router
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
