Vue Router权限控制与动态路由-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46382477/article/details/108114882
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>权限控制- filters</title>
	<style>
		.active {
			font-size: 20px;
			color: #ff7300;
			text-decoration: none;

		}

		.main-menu a {
			display: inline-block;
			margin-right: 10px;
		}
	</style>
	<script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
</head>

<body>
	<div id="itapp">
		<div class="main-menu">
			<!-- <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
            <router-link to="/finance">财务信息</router-link> -->

			<!-- 写成动态的 -->
			<!-- $router.options.routes  可以从计算器属性-->
			<!-- {{$router.options.routes}} -->
			<router-link v-for="(item,index) in $router.options.routes" :key="index" :to="item.path">{{item.meta.title}}
			</router-link>
			<!-- <router-link v-for="(item,index) in getMyRoutes" :key="index" :to="item.path">{{item.meta.title}}</router-link> -->

		</div>
		<div>
			<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
				<router-view></router-view>
			</transition>
		</div>

		<hr>
		<button @click="push">添加路由</button>
		<button @click="replace">替换路由</button>
	</div>

	<template id="user">
		<div>
			<h3>用户信息</h3>
			<ul>
				<router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>
				<router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
				<router-link to="/user/info" tag="li">用户注册</router-link>
			</ul>
			<router-view></router-view>
		</div>
	</template>

	<script>
		var Home = {
			template: '<h3>我是主页</h3>'
		}
		var User = {
			template: '#user'
		}
		var Login = {
			template: '<h4>用户登陆。。。获取参数：{{$route.query}},{{$route.path}}</h4>'
		}
		var Regist = {
			template: '<h4>用户注册。。。获取参数：{{$route.params}},{{$route.path}}</h4>'
		}
		var Finance = {
			template: '<h4>财务信息</h4>'
		}

		var routes = [{
				path: '/home',
				component: Home,
				meta: {
					title: '首页',
					roles: ['admin', 'guest']
				}
			},
			{
				path: '/user',
				component: User,
				meta: {
					title: '用户',
					roles: ['admin', 'guest']
				},
				children: [{
						path: 'login',
						component: Login
					},
					{
						//动态路由匹配  // 动态路径参数 以冒号开头
						path: 'regist/:username/:password',
						component: Regist
					}

				]
			},
			{
				path: '/finance',
				component: Finance,
				meta: {
					title: '财务信息',
					roles: ['admin']
				}
			},
			{
				path: '*',
				redirect: '/home',
				hidden: true
			}
		]

		//过滤需要显示的路由 , 权限控制
		//第一种方式， 通过设置 是否有权限 roles参数来过滤 guest为游客 
		//假设登录成功， 你知道用户的角色，权限
		routes = routes.filter((option, index) => {
			return !option.hidden && (option.meta && option.meta.roles.includes('guest'));
		})

		const routerAll = new VueRouter({
			routes, //简写，相当于routes:routes
			linkActiveClass: 'active', //更新活动链接的class类名,默认的激活的 class
			linkExactActiveClass: 'active-extact', //精确激活的 class
			mode: "hash", //默认
		});

		new Vue({
			el: '#itapp',
			router: routerAll, //注入路由
			// test:routerAll,   //this.$options.test
			computed: {
				getMyRoutes() {
					var thisData = this.$router.options.routes;
					var test1 = thisData.filter((option) => {
						return option.meta
					})
					return test1;
				}
			},
			methods: {
				push() {
					// this.$options.test.push({path:'home'})
					this.$router.push({
						path: 'home'
					}); //添加路由，切换路由
					// routerAll.push({path:'home'}); //添加路由，切换路由

					// 获取参数 
					// this.$route.query

				},
				replace() {
					routerAll.replace({
						path: 'user'
					}); //替换路由，没有历史记录
				}
			}
		});
	</script>
</body>

</html>
手搭脚手架vue-cli
