vue router中meta路由元信息&多套路由权限匹配

朴灿烈づ我的快乐病毒、 2022-11-28 00:51 524阅读 0赞

如果我们想要写一个面包屑的效果，而且切换不同的路由，能够展示不同的面包屑。比如下面的页面中所展示的，左侧是二级路由，右侧是路由页面展示。每次点开不同的路由，所展示的面包屑进行一个切换。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]  
如何实现这种效果？或者反过来想，既然不能把它写死，那肯定得动态加载。又是与路由相关，那么该怎么将这个信息记录在路由里面呢？

可以用meta路由元信息，将这些琐碎的信息归纳。

### 路由meta 路由记录 / 路由元信息 ###

可以给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作，供页面组件或者路由钩子函数中使用。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]

页面中得到路由信息：`$router.options.routes`

相关单页面中使用：`this.$route.meta.xxx`

那么就可以根据路由信息，动态创建页面中的导航。

![在这里插入图片描述][20200816200403792.png_pic_center]  
参考官方：[Vue Router路由元信息][Vue Router]

##### 下面来看看我是怎么使用这个meta的。 #####

首先要先创建一级二级路由，我把二级路由进行了封装，再引入一级路由里面。

>>一级路由index.js
    
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import { errouter} from './indexerrouter.js'
    
    Vue.use(VueRouter)
    	const routes = [
    	 { 
    	   path: '/index',
    	   name: 'index',
    	   component: () => import('../views/index.vue'),
    	   children:errouter
    	 },
    	 ......
    ]
    const router = new VueRouter({ 
    	mode: 'history',
    	base: process.env.BASE_URL,
    	routes
    })
    export default router

>>二级路由indexerrouter.js
    
    export let errouter=[
    	......
        { 
            path:'eruser',
            name:'eruser',
            meta:{ 
                Breadcrumb:["首页","人员管理"],
                title:"用户导航",
                path:'/index/eruser'
            },
            component:()=>import('@/views/indexer/eruser.vue')
        }
    ]

路由搞定之后，就需要写布局进行数据渲染了。我们先来看一下当前页面路由信息是怎么获取的吧。我是先把index.js页面的路由信息拿到，然后渲染二级路由。详细的就不看了，只看一下当前页面路由信息的获取：`this.$router.options.routes[0].children`，使用的时候可以直接`metaRouter.meta.title`。

computed: { 
        metaRouter() { 
            return this.$router.options.routes[0].children;
        }
    },

下面是在页面上打印的所有页面路由信息以及当前页面的子路由信息。  
![在这里插入图片描述][2020081619563243.png_pic_center]  
![在这里插入图片描述][20200816200416782.png_pic_center]  
然后再去每个二级路由页面，将面包屑搞效果定，通过获取该路由的meta信息，动态渲染面包屑里的数据。  
遍历该页面路由的meta信息，不再通过上面的方式拿到meta，而是直接`$route.meta.Breadcrumb`拿到meta里的面包屑数据。

>>element ui的面包屑
    
    {
       {$route.meta}} 
    <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item,index) in $route.meta.Breadcrumb" :key="index">{
       {item}}
        </el-breadcrumb-item>
    </el-breadcrumb>

![在这里插入图片描述][20200817094837326.png_pic_center]  
这样就算meta应用成功。

### 根据不同的用户权限分配不同的路由导航 ###

另外有个效果，当我登录是，通过判断是管理员还是普通用户，引导他们进入不同的内容的index.vue组件页面。没错，只用一个页面，实现两种权限。  
![在这里插入图片描述][20200817095346577.png_pic_centr] ![在这里插入图片描述][20200817095530839.png_pic_cnter]  
如何做到呢？有多种方式，下面看看其中一种方式：两套完整的路由，进行切换。

1、可以提前创建几套路由规则，然后在需要切换的页面中进行引用。

##### 下面来看看我是怎么切换整套路由的。 #####

1、首先要另外新创建一套路由，将所有的路由规则拷贝过去，只在这个一级路由的子路由那进行内容更改。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 4]  
2、然后在登录页面里面，通过判断后台返回的登录状态码，分配不同的权限。

import {  newrouter } from "@/router/userrouter.js"
    ......
    if (ok.data.data.loginid == 9527) { 
    	// console.log("登陆成功");
    	// 验证权限
    	if (ok.data.data.uid === 1) { 
    		// 用户权限 更换整套路由
    		this.$router.options.routes = newrouter
    		this.$router.addRoutes(newrouter)
    		this.$router.push("/index")
    	} else { 
    		//管理员权限
    		// this.$router.push("/index/eruser")
    		this.$router.push("/index")
    	}
    }else{ 
    	// console.log("登陆失败");
    	alert("用户名密码错误 请重新登录！！！")
    }

这样就能实现普通用户进入普通页面，超管进入超管页面了。

### 总结 ###

总结了几个需要注意的事项：

（1）路由出口`<router-view></router-view>`放在哪，下级路由里的内容就显示在什么地方。

![在这里插入图片描述][20200816200027964.png_pic_center]  
（2）给属性绑定值时，**一定**记得加上"v-bind"或者"："。

![在这里插入图片描述][20200817091745518.png_pic_center]  
（3）首次打开哪个二级路由，如果这个一级路由没有路由展示入口，可以直接在路由跳转时直接重定向到某个二级路由。  
![在这里插入图片描述][20200817091747792.png_pic_center]

![在这里插入图片描述][20200817101615870.png_pic_center]  
（4）在有package.json的情况下，直接运行npm install 就可以下载全部依赖包。

（5）addRouter可以动态改变路由。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/4188ba3708dd4b2d94357f26aa12ed5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/a4ccd11d4418444786935c5fe537711f.png
[20200816200403792.png_pic_center]: /images/20221124/7b7529fbefc149538586385ed3be6543.png
[Vue Router]: https://router.vuejs.org/zh/guide/advanced/meta.html
[2020081619563243.png_pic_center]: /images/20221124/02e6f16858074fe48415bca34fa6e2e4.png
[20200816200416782.png_pic_center]: /images/20221124/b641910d61384008bd28ac2834931a79.png
[20200817094837326.png_pic_center]: /images/20221124/37448f9d15334a018207c2cc8fb930a8.png
[20200817095346577.png_pic_centr]: https://img-blog.csdnimg.cn/20200817095346577.png#pic_centr
[20200817095530839.png_pic_cnter]: /images/20221124/5fa73bcfb6eb41689c5d2f3533ece0db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/fdcccfb4c5b34eb79b545169a9001af3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/f6a87791c61c4084a30309324fe27147.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/621b288b77dc430cb3640cc24703a7c8.png
[20200816200027964.png_pic_center]: /images/20221124/9b8f599b901d49679a1d1dfd31a849d0.png
[20200817091745518.png_pic_center]: /images/20221124/8474a782407444b1b0f412f740ccc4f5.png
[20200817091747792.png_pic_center]: /images/20221124/7f378736db374e759b440607da3eeaa2.png
[20200817101615870.png_pic_center]: /images/20221124/e1870d49f63e4cd2b87c9b6a2a28ed42.png