(精华2020年5月8日更新) vue教程篇 vue-router路由的权限控制

<!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: '

我是主页

'
} var User = { template: '#user' } var Login = { template: '

用户登陆。。。获取参数:{{$route.query}},{{$route.path}}

'
} var Regist = { template: '

用户注册。。。获取参数:{{$route.params}},{{$route.path}}

'
} var Finance = { template: '

财务信息

'
} 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基础篇)