vue-router 路由管理
这里主要是记录一下，项目开发过程中，涉及到路由的一些写法。
router-view
例如：三个子页面，共享同一个布局。
路由文件：
javascript
const routes = [
{
path: '/',
redirect: '/home', // 路径为/时，定向跳转到首页
},
{
path: '',
component: () => import('@/views/layout/MainLayout.vue'), //共用一个主布局
children: [
{
path: '/home',
name: 'home',
component: () => import('@/views/index.vue'),
meta: {
title: ''
},
},
{
path: '/monitor',
name: 'monitor',
component: () => import('@/views/monitor/map.vue'),
meta: {
title: '农情监测'
},
},
{
path: '/user',
name: 'user',
component: () => import('@/views/user/index.vue'),
meta: {
title: '个人中心',
needLogin: true
},
},
],
meta: {
title: '首页'
}
}
]前端文件：
html
<template>
<div>
<Container>
<keep-alive>
<router-view></router-view>
</keep-alive>
</Container>
<FooterMenu :currentRoute="currentRoute"></FooterMenu>
</div>
</template>VueRouter.prototype.push
在vue项目中，如果使用$router.push跳转到一个相同的路由，就会遇到以下错误:
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location (路由重复跳转)
- 解决
javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/ChildLayout.vue'
/** 重点代码段 **/
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error=> error)
}
/** 重点代码段 **/
Vue.use(VueRouter)TIP
修改原型对象上的方法，增加了对抛出的错误进行捕获的操作，捕获到错误后不做任何操作。（不做任何操作也不会对重复跳转的组件有任何的影响，也不会对要跳转的组件进行重新渲染，因为他并不会执行重复跳转的操作）
router.beforeEach （路由守卫）
主要的功能涉及到以下几点：
在跳转到新页面时，也就是在执行路由转换时，可以动态修改页面标题
可以用于判断，是否需要登录/权限，才能访问的页面
javascript
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title // 如果路由有设定meta.title 的值，可以在跳转前，把网页的标题替换成路由设定的title
}
// 默认没有登录
let isLogin = false;
// 从缓存中拿取token
let token = localStorage.getItem('token');
console.log(token,'---获取到的token')
// 遍历路由，拿到是否需要登录的属性
let matched = to.matched.some((item) => {
return item.meta.needLogin;
})
// 判断是否需要登录权限
if (matched) {
// 判断是否有token
if(token != null && token != '') {
isLogin = true;
console.log('进来了')
// 如果有带token，直接进入
next();
} else {
// 否则跳转到登录页
next('/login')
}
} else {
// 由于只有部分页面需要登录，所以在没有token的情况下，不会强制把所有页面都进入到登录页
next()
}
})javascript
const routes = [
{
path: '/user',
name: 'user',
component: () => import('@/views/user/index.vue'),
meta: {
title: '个人中心',
needLogin: true // 变量名可随意，用于判断是否需要登录（权限）
},
},
]