<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> permission controls -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"> home </router-link> <router-link to="/user"> user </router-link> <router-link To ="/finance"> </router-link> <! -- write dynamic --> <! -- $router.options.routes can be added from the calculator property --> <! -- {{$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"> Add route </button> <button </button> </div> <template id="user"> <div> <h3> </h3> <ul> <router-link to="/user/login? </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 User = {template: '# User '} var User = {template: '# User '} var Login = {template: '<h4> {{$route.query}},{{$route.path}}</h4>'} var Regist = {template: '<h4> User registration... {{$route. Params}},{{$route. Path}}</h4>'} var routes = {template: '<h4> </h4>'} var routes = [{route: route. '/home', Component: home, meta: {title: 'home', roles: ['admin', 'guest']}}, {path: '/user', Component: user, meta: {title: 'user ', roles: ['admin', 'guest']}, children: [{path: 'login', Component: The Login}, {/ / / / dynamic routing matching parameter dynamic path Begin with a colon path: ': regist / : username/password, component: regist}}, {path: '/finance', Component: finance, meta: {title: 'finance', roles: ['admin']}}, {path: '*', redirect: '/home', hidden: // The first way to filter guest is to set whether or not the user has permission for roles. // If the user has logged in successfully and you know the user's role, Permission routes = routes.filter((option, index) => {return! option.hidden && (option.meta && option.meta.roles.includes('guest')); }) const routerAll = new VueRouter({routes:routes linkActiveClass: 'active', // Update the active link's class name, default active class linkExactActiveClass: 'active-extact', // Exact active class mode: "hash", // default}); New Vue({el: '# itApp ', router: routerAll, // Inject route // 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'}); Replace () {routerAll.replace({path: 'user'}); routerAll.replace({path: 'user'}); // Replace route, no history}}}); </script> </body> </html>Copy the code