标签：vue 跳转 meta router home 路由 页面
原文来自 vue router路由配置，元信息meta的使用-登录拦截验证_shenroom的博客-CSDN博客
看原文排版更舒服，我只是记录一下
路由基本配置
1.在router文件夹中找到 indexs.js
注意：如果创建项目是没有安装router，不会有router文件夹，该文件夹在src 文件夹的根目录中
// 1.引入路由以及vue，下面的是固定写法，照写就可以
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
2.创建路由实例
const router = new Router({
linkActiveClass: 'app-active', // 路由点击选中时的颜色（app-active为自定义的class样式类）
routes: [
{ // 根路径
path: '/',
redirect: '/home',
component: () => import('@/pages/home') // 路由懒加载写法
},
{
path: '/home',
name: 'home',
component: () => import('@/pages/home'),
}
})
/* 路由拦截器 路由跳转前的操作 */
router.beforeEach((to, from, next) => {
next()
})
/* 路由拦截器 路由跳转后的操作 */
router.afterEach(to => {
})
3.将路由导出，供外部接收，主要用于main.js接收
export default router
2.配置好router中的index.js文件后需要在main.js 中，挂载路由router到vue实例上
import Vue from 'vue'
import App from './App'
import router from './router' // 导入配置好的路由文件
import store from './store' // 导入配置好的vuex文件
Vue.config.productionTip = false
new Vue({
el: '#app',
router, // 挂载路由到实例中
store,// 挂载vuex到实例中
components: { App },
template: '<App/>'
})
通过上面两步，路由的基本配置已经完成可以正常使用路由了。
路由元信息meta使用
1.路由拦截器
router.beforeEach( to, from, next )
router.afterEach( to, from )
参数说明：
to:表示要跳转的路由对象。
from:表示跳转前的路由对象
next:继续执行跳转的函数，只有跳转前的拦截才有这个参数。
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
redirect: '/home',
component: () => import('@/pages/home')
}]
})
/* 路由拦截器 路由跳转前的操作 */
router.beforeEach((to, from, next) => {
/* 路由跳转前可进行各种操作，如数据处理，权限验证，取消上页所有网络请求等等，
*一定要注意，数据处理后，一定要执行next(),否则路由不会进行跳转。*/
if(true){
// 进行的操作
next()
}else{
// 进行的一些操作
next()
}
})
/* 路由拦截器 路由跳转后的操作 */
router.afterEach(to => {
// 在这里执行路由跳转成功后所进行的操作
})
export default router
上面已经解了拦截器的基本使用，下面再来看一下，拦截器结合路由元信息meta的使用。
2.路由拦截器中元信息meta对象的使用----登陆拦截验证 和 修改页面的 title
场景描述如下图:
1.用户访问home页面,或者home的子页面mine页面时，由于home只有登陆后才能进入，所以用户在访问这两个页面时需要判断是否登录，如果没有登录就跳转到登录页面，登录成功后自动跳转到用户访问的权限页面。
2.当调转对应的路由页面时，就更改网页的名字，也就是index.heml 中 head 标签里面的 title 的值
（1）、首先准备三个路由页面，home.vue 、 login.vue 、mine.vue
/*------------------------------------------home.vue------------------------------------------*/
<template>
<div>
<h1>首页</h1>
<router-link to="/home/mine">前往首页子页面</router-link>
<router-view></router-view>
<div>
</template>
...
/*------------------------------------------mine.vue------------------------------------------*/
<template>
<div>
<h1>子页面</h1>
<div>
</template>
...
/*------------------------------------------login.vue------------------------------------------*/
<template>
<div>
<h1>登录页面</h1>button
<button @click="login">前往首页子页面</button>
<div>
</template>
<script>
...
methodes:{
login(){
localStorage.login = true // 登录状态
// this.$route.params.redirect 是路由拦截是传过来的拦截页面的路由对象，看下文的路由拦截配置详情，有说明。
if( this.$route.params.redirect ){ // 判断是否有redirect参数
this.$router.push( this.$route.params.redirect ) 登录后跳回被的拦截
}
}
}
...
</script>
（2）、在路由配置router/index.js文件中 设置路由拦截
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{ // 根路径
path: '/',
redirect: '/home',
component: () => import('@/pages/home'), // 路由懒加载写法
},{
path: '/home',
name: 'home',
component: () => import('@/pages/home'),
meta:{
isLogin : true // 自定义一个属性，true需要登录权限
title:"主页"
},
children:[{
path: 'mine',
name: 'mine',
component: () => import('@/pages/home/mine'),
meta:{ // 不做登录权限的设置
title:"用户中心页"
}
}]
},{
path: '/login',
name: 'login',
component: () => import('@/pages/login'),
meta:{
title:"登录页"
}
},
})
//导航前守卫(跳转前)
router.beforeEach(function(to,from,next){
// to: 表示要跳转的页面。from:表示从哪个页面来
let login_in = localStorage.login // 是否已登录
let require = to.matched.some(function(item){ // 是否需要登录
return item.meta.isLogin
})
if( !login_in && require ){ // 当未登录，且跳转的页面需要登录后才能操作时，进行路由拦截
next({ // 跳转登录页
name: "login",
params: { redirect: to } // 将 要跳转（即被拦截） 的路由对象，作为参数，传递到登录页面
});
}else{ // 已登录就正常跳转，不做任何拦截
next() // 正常跳转到下一页
}
})
//导航后守卫(跳转后)
router.afterEach(function(to,from){
document.title = to.meta.title //跳转后设置页面的title
})
export default router
到此所需的功能我们已经实现了。
细心的人可能会发现 beforeEach 拦截器中 变量 require 的值不是应该直接用路由meta.isLogin 的值 即 to.meta.isLogin的值？。为什么使用了数组some()方法对to.matched进行循环，来赋值？to.matched又指的是什么？
这一步很重要，不能直接使用to.meta.isLogin的值，这样的话只是跳转到home.vue时会被拦截，但是如果直接在地址栏访问 home.vue 的子页面mine.vue时如：localhost:8080/#/home/mine ，就不会进行拦截。
因为mine.vue页面，配置路由时没有在meta中设置 isLogin，所以to.meta.isLogin的值是false，会直接跳转不会进行拦截。所以要循环to.matched 进行判断。说了这么多，咱来看一下to.matched指的是什么：
to.matched 返回的是一个数组，里面是存放的是路由对象，指当前匹配的路径中所包含的路由片段所对应的路由对象。
比如：localhost:8080/#/home/mine 这个路径中我看到有两个路由片段home 和 mine
因此to.matched 的数组存放的就是 home 和 mine 的路由实例。用数组some()循环方法，是匹配数组中所有元素，只要有一个元素的某个值到达了条件 item.meta.isLogin 为true，该方法就会返回true。所以直接访问mine页面时，to.matched数组中，home对象的meta.isLogin是true，达到了条件，所以整体返回了true，此时 require 的值即为true。 不懂数组some()方法的可以去恶补一下ES6-数组新增的方法。
————————————————
版权声明：本文为CSDN博主「shenroom」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41772754/article/details/87915596
标签：vue,跳转,meta,router,home,路由,页面 来源： https://www.cnblogs.com/Jerseyblog/p/15082753.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。