精华内容
参与话题
问答
  • 基本用法 <!DOCTYPE html> <... <head>...meta charset="UTF-8">... /* .router-link-active{ font-size:20px; color:#ff7300; text-decoration:none; } */ .active{ font

    基本用法

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>路由基本用法</title>
    	<style>
    		/* .router-link-active{
    			font-size:20px;
    			color:#ff7300;
    			text-decoration:none;
    		} */
    		.active{
    			font-size:20px;
    			color:#ff7300;
    			text-decoration:none;
    		}
    	</style>
    	<script src="js/vue.js"></script>
    	<script src="js/vue-router.js"></script>
    </head>
    <body>
    	<div id="itapp">
            <div>
                <!-- a标签 -->
                <router-link to='/home' >主页</router-link>  
                <router-link to='/news'>新闻</router-link> 
            </div>
            <div>
                <!-- 用来显示内容 -->
                <router-view></router-view>
            </div>
    	</div>
    
    	<script>
            // 1.定义组件
            var Home={
    			template:'<h3>我是主页</h3>'
    		}
    		var News={
    			template:'<h3>我是新闻</h3>'
    		}
    		
            // 2.配置路由
            var routesAll= [{
                path:'/home',
                component:Home
            },{
                path:'/news',
                component:News
            }];
            //3. 创建路由实例
    
            var router = new VueRouter({
                routes:routesAll,
                mode:'hash', //history
                linkActiveClass:'active' //当前所处的链接的class
            })
    
            // 4.将router挂载在vue实例上
    		new Vue({
    			el:'#itapp',
                // router:router , 
                router  //注入路由
    		});
    	</script>
    </body>
    </html>
    
    

    路由嵌套传递参数和路由守卫

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8">
    	<title>路由嵌套和参数传递 tag</title>
    	<style>
    		.active {
    			font-size: 20px;
    			color: #ff7300;
    			text-decoration: none;
    		}
    	</style>
    	<script src="js/vue.js"></script>
    	<script src="js/vue-router.js"></script>
    </head>
    
    <body>
    	<div id="itapp">
    		<div style="position: fixed;top:180px">
    			<router-link to="/home">主页</router-link>
    			<router-link to="/user">用户</router-link>
    		</div>
    		<div style="height:2000px">
    			<router-view></router-view>
    		</div>
    
    		<hr>
    		<button @click="push">添加路由</button>
    		<button @click="replace">替换路由</button>
    	</div>
    
    	<template id="user">
    		<div style="height:2000px">
    			<h2>用户信息</h2>
    			<ul>
    				<router-link to='/user/login?name=tom&pwd=123'>用户登录</router-link>
    				<router-link to='/user/regist/alice/456'>用户注册</router-link>
    			</ul>
    			<router-view></router-view>
    		</div>
    	</template>
    
    	<script>
    		var Home = {
    			template: '<div><h3>我是主页 {{$route.params}}</h3></div>'
    		}
    		var User = {
    			template: '#user'
    		}
    		var Login = {
    			template: '<h4>用户登陆。。。获取参数:{{$route.query}},{{$route.path}}</h4>'
    		}
    		var Regist = {
    			template: '<h4>用户注册。。。获取参数:{{$route.params}},{{$route.path}}</h4>'
    		}
    
    		const routes = [{
    				path: '/home',
    				name: 'home',
    				component: Home
    			},
    			{
    				path: '/user',
    				name: 'user',
    				component: User,
    				beforeEnter(from, to, next) {
    					console.log(`from ${from.fullPath},to ${to.fullPath}`);
    					setTimeout(() => {
    						next();
    					}, 500)
    				},
    				// beforeLeave(from,to,next){
    				//     console.log(`from ${from.fullPath},to ${to.fullPath}`);
    				//     console.log('beforeLeave');
    				//     next();
    				// },
    				//子路由使用: 需要在上一级 (User)路由页面加上router-view
    				// 子路由使用,需要再上一级路由页面加上 router-view 显示。
    				// 使用children属性实现路由嵌套,子路由path前不要加/,否则永远以根路径开始请求
    				children: [{
    					path: 'login',
    					name: 'login',
    					component: Login
    				}, {
    					path: 'regist/:username/:password',
    					name: 'regist',
    					component: Regist
    				}]
    
    			},
    			{
    				path: '*',
    				redirect: '/home'
    			}
    		]
    
    		const routerAll = new VueRouter({
    			routes: routes, //简写,相当于routes:routes
    			linkActiveClass: 'active', //更新活动链接的class类名,默认的激活的 class
    			linkExactActiveClass: 'active-extact', //精确激活的 class
    			mode: "hash", //默认
    			//   页面跳转后,页面是否滚动
    			scrollBehavior(to, from, savedPostion) {
    				if (savedPostion) {
    					return savedPostion;
    				} else {
    					return {
    						x: 0,
    						y: 0
    					}; //每次切换页面都是滚动到页面顶部
    				}
    			}
    		});
    
    		var vm = new Vue({
    			el: '#itapp',
    			router: routerAll, //注入路由
    			// test:routerAll,  //一般不这么写
    			methods: {
    				push() {
    					// 1.字符串形式
    					// this.$router.push('/home')
    					// //2. 对象
    					// this.$router.push({
    					//     path:'/home'
    					// })
    
    					//  //2. 对象,带查询参数
    					//  this.$router.push({
    					//     path:'/home',
    					//     query:{
    					//         plan:'private'
    					//     }
    					// })
    					// 获取参数$route.query, 相当于get
    
    					// 3.命令路由
    					// this.$options.test({
    					//     name:'home',
    					//     params:{
    					//         userid:'123'
    					//     }
    					// });
    
    					this.$router.push({
    						name: 'home',
    						params: {
    							userid: '123'
    						}
    					})
    					// 获取参数$route.params
    
    				},
    				replace() {
    					routerAll.replace({
    						path: 'user'
    					}); //替换路由,没有历史记录
    				}
    			}
    		});
    	</script>
    </body>
    
    </html>
    
    
    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>权限控制- filters</title> <style> .active { font-size: 20px;... display
    <!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>
    
    
    展开全文
  • // import VueRouter from 'vue-router' import VueRouter from '../MYRouter/index.js' Vue.use(VueRouter)// 执行install方法 const routes = [ { path:'/', redirect:'/goods' }, { path: '/goods', ...
    import Vue from 'vue'
    // import VueRouter from 'vue-router'
    import VueRouter from '../MYRouter/index.js'
    
    Vue.use(VueRouter)// 执行install方法
    
    const routes = [
      {
        path:'/',
        redirect:'/goods'
      },
      {
        path: '/goods',
        name: 'goods',
        component: () => import('../views/goods.vue')
      },
      {
        path: '/ratings',
        name: 'ratings',
        component: () => import('../views/ratings.vue')
      },
      {
        path: '/seller',
        name: 'seller',
        component: () => import('../views/seller.vue')
      },
    ]
    //new执行构造函数
    const router = new VueRouter({
      routes,
      linkActiveClass:'active'
    })
    
    export default router
    
    

    自定义插件MYRouter的内部写法

    //我们写插件的地方
    
    let Vue ;
    
    class MYRouter {
        static install(_Vue) {//use执行的函数
            Vue = _Vue;
            Vue.mixin({
                beforeCreate(){
                    // const options = this.$options;
                    //this -- vue实例化对象
                    Vue.prototype.$rmrouter = '我是路由!'
                    if(this.$options.router){
                        //this.$options.router 在vue实例化的时候被注入的router对象
                        this._router = this.$options.router
                        Vue.util.defineReactive(this._router, 'current', '/') ; //方式二
                        //这个是把_route加入数据监控,所以你可以watch到_route
                        this.$options.router.init();
                    }
                    
                }
            })
        }
        constructor(options){
            this.$options = options;
            this.routerMap = {}; 
            
            // this.currentPath = ''; //当前的path
            // 路由  -- 组件
            // test1  --- test1.vue
            // //方式一: 
            // this.app = new Vue({
            //     data(){
            //         return {
            //             //当前的路由
            //             current:'/'
            //         }
            //     }
            // });
       
           
        }
        init(){
            console.log('ppp');
            //1. 监听hash的变化
                this.initEvents();
            //2. 处理路由routerMap
                this.createRouterMap();
            //3 . 初始化组件  , router-link, router-view
                this.initComponent();
            //4.路由守卫
        }
         //1. 监听hash的变化
        initEvents(){
            window.addEventListener('hashchange',this.onHashChange.bind(this),false)
            window.addEventListener('load',this.onHashChange.bind(this),false)
        }
        //2. 处理路由routerMap
        createRouterMap(){
            // this.routerMap = {
            //     '/goods':'component',
            //     '/goods1':'component1',
            // }
            this.$options.routes.forEach((item)=>{
                this.routerMap[item.path] = item;
            })
        }
    
        onHashChange(e){
            console.log('我监听到路由变化了');
            //获取hash
            let hash = location.hash.slice(1) || '/';
            this.current = hash; //方式一
        }
        //3 . 初始化组件  , router-link, router-view
        initComponent(){
            Vue.component('router-link',{
                // props:['to'],
                props:{
                    to:String
                },
                render:function(h){
                    // h-- createElemnt
                    //  3个参数
                    //  dom节点名
                    //  属性
                    //  子元素
                    return h('a',{
                        attrs:{
                            href:'#'+this.to
                        }
                    },[this.$slots.default])
                }
            });
    
            Vue.component('router-view',{
                render:h=>{
                    console.log('ppp');
                    // console.log(this.app.current); //方式一
                    //this vuerouter实例化构造函数的对象
                    
                    let component = this.routerMap[this.current].component;
                    return h(component);
                }
            })
    
        }
    
    }
    export default MYRouter;
    
    
    展开全文
  • 一、 addRoutes权限控制 场景: 对登陆成功后的用户可能会有不同的身份权限, 看到的系统菜单以及功能不一样, 这个时候需要用到 动态路由的方式来处理 ...import VueRouter from "vue-router"; Vue.use(VueRout

    一、 addRoutes权限控制

    场景: 对登陆成功后的用户可能会有不同的身份权限, 看到的系统菜单以及功能不一样, 这个时候需要用到 动态路由的方式来处理

    路由结构:
    |— initRoutes 默认是可以看到的路由,是所有用户都可以看到的路由菜单
    |— asyncRouetes 需要登陆后确认权限才能看到的路由

    1.1 初始路由initRoutes

    import Vue from "vue";
    import VueRouter from "vue-router";
    
    Vue.use(VueRouter);
    
    import home from '../pages/home.vue';
    import news from '../pages/news.vue';
    
    var allRoutes = [{
        path:'/login',
        name:'login',
        meta:{
            title:'登陆'
        },
        component:()=>import('../pages/login.vue')
    },{
        path:'/home',
        name:'home',
        component:home,
        meta:{
            title:'首页'
        },
    },{
        path:'/news',
        name:'news',
        meta:{
            title:'新闻'
        },
        component:news
    }]
    export default new VueRouter({
        routes:allRoutes,
        mode:'hash', //history
        base:'/',
        //   vue-router 认为只有路由真正匹配时,才会加上 exact-active-link 这个 class,
        //   如果只有一部分重合,就会加上 active-menu。
        // fallback
        // 不是所有浏览器都支持前端路由的方式,如果不支持,设置 fallback: true,
        // vue 会自动 fallback 到 hash 模式。
        fallback: true,
        linkActiveClass: "active-menu",
        linkExactActiveClass: "exact-active-menu",
    })
    // 在main.js中把router 实例注入到 vue 根实例中,就可以使用路由了
    
    

    1.2 动态路由 asyncRouetes

    var asyncRouetes = [
        {
            path:'/finance',
            component:()=>import('../pages/finance.vue'),
            meta: {
                title: '财务信息',
                roles: ['admin']
            }
           },
           {
           path:'/staffs',
           component:()=>import('../pages/staffs.vue'),
           meta: {
               title: '员工信息',
               roles: ['admin','guest']
             }
           }
       ];
    
     export default  asyncRouetes;
    
    

    1.3 默认在vueRouters 实例化的时候, 只是传入初始的路由

    export default new VueRouter({
        routes:allRoutes,
        mode:'hash', //history
        base:'/',
        //   vue-router 认为只有路由真正匹配时,才会加上 exact-active-link 这个 class,
        //   如果只有一部分重合,就会加上 active-menu。
        // fallback
        // 不是所有浏览器都支持前端路由的方式,如果不支持,设置 fallback: true,
        // vue 会自动 fallback 到 hash 模式。
        fallback: true,
        linkActiveClass: "active-menu",
        linkExactActiveClass: "exact-active-menu",
    })
    // 在main.js中把router 实例注入到 vue 根实例中,就可以使用路由了
    
    在vue实例化的时候进行挂载
    

    1.4 进行登录处理,获取token和用户信息

     localStorage.setItem('token','XXXXXXXXXXX');
     localStorage.setItem('userRole','admin'); //submain, guest
    

    1.5 添加全局路由守卫

    import Vue from 'vue';
    
    import axios from './providers/axios2.js';
    import api from './providers/api.js';
    
    import App from './App.vue'
    import VueRouter from './router/index.js';
    
    //如果全局, 别的页面都不需要做任何处理, babel-plugin-component也不需要配置
    // import ElementUI from 'element-ui';
    // import 'element-ui/lib/theme-chalk/index.css';
    // Vue.use(ElementUI);
    
    Vue.prototype.$axios = axios;
    Vue.prototype.$api = api;
    
    window.EventEmitter = new Vue();
    
    //template模式
    // new Vue({
    //     el:'#app',
    //     data:{
    //         hello:'hello',
    //         msg:'world'
    //     },
    //     // template:`<div id="app1">
    //     //     <h1>{{msg}}</h1>
    //     // </div>`,
    //     components:{App}, //注册全局组件
    //     template:'<App/>'
    // });
    import asyncRouetes from './router/dynamic.js';
    var initRoutes = VueRouter.options.routes;
    
    //优化
    var allPaths = [];
    asyncRouetes.forEach((option)=>{
        allPaths.push(option.path);
    })
    VueRouter.beforeEach((to, from, next) => {
        var userRole = localStorage.getItem('userRole');
        var token = localStorage.getItem('token');
    
         //需要判断下是否已经添加过动态路由,不要重复添加
         // 方式: 判断默认和路由和 读取的路由是否一致  
            var isHAS =  VueRouter.options.routes.some((option)=>{
                return allPaths.includes(option.path)
             });   
             if(isHAS){
                 next();
                 return;
             }
    //判断是否存在token
        if(token && userRole){
            var asyncRouete =  asyncRouetes.filter((option,index)=>{
                return option.meta.roles.includes(userRole);
            });
            //将新路由添加到路由中, 如果不加组件component不能正确渲染
            VueRouter.addRoutes(asyncRouete);
             //为了正确渲染导航,将对应的新的路由添加到VueRouter中	
            VueRouter.options.routes = [...initRoutes,...asyncRouete];
            EventEmitter.$emit('allOption',VueRouter.options.routes)
            next();
        } else {
        // 跳转到登陆页面
            if(to.path=='/login') {
                next();
            } else {
                next('/login');
            }
        }
      
    })
    
    // render
    var vm = new Vue({
        el:'#app',
        data:{
            hello:'hello',
            msg:'world'
        },
        router:VueRouter,
        // render(createElement){
        //     return createElement('div',{
        //         id:'app1'
        //     },[
        //         createElement('h1',this.msg)
        //     ])
        // },
        //使用组件,利用render函数渲染
        // render(h){
        //      return h(App)
        // },
        render:h=>h(App)
    
    });
    
    

    二、 权限控制在项目中的实际使用

    2.1 配置必要的动态路由文件

    在router文件夹下添加 dynamic.js
    在src/pages文件夹下添加 finance.vue, staffs.vue作为测试

    var asyncRouetes = [
        {
            path:'/finance',
            component:()=>import('../pages/finance.vue'),
            meta: {
                title: '财务信息',
                roles: ['admin']
            }
           },
           {
           path:'/staffs',
           component:()=>import('../pages/staffs.vue'),
           meta: {
               title: '员工信息',
               roles: ['admin','guest']
             }
           }
       ];
    export default  asyncRouetes;
    

    2.2 登录成功以后需要获取toekn以及用户信息

     localStorage.setItem('token','XXXXXXXXXXX');
     localStorage.setItem('userRole','admin'); //submain, guest
    

    2.3 在入口文件main.js进行 导航守卫

    引入文件:

     import asyncRouetes from './router/dynamic.js';
    

    全局前置守卫配置:

    注意:路由守卫的时候是针对vueRouter实例对象

     VueRouter.beforeEach((to,from,next)=>{
         //如果自定义了标题就取标题,否则拿全局标题
       window.document.title = to.meta.title?to.meta.title:'测试系统';
    
         //这里可以获取登陆后的权限
         var UserToken = localStorage.getItem('token');
         var userRole = localStorage.getItem('userRole');
    
         //判断是否存在token
         if(UserToken && userRole){
             //已登录
             var asyncRouteMenu = asyncRouetes.filter((item,index)=>{
                 return item.meta.roles.includes(userRole)
             })
    
             //将新路由添加到路由中, 如果不加组件component不能正确渲染
             VueRouter.addRoutes(asyncRouteMenu); 
             //为了正确渲染导航,将对应的新的路由添加到VueRouter中
             
             var initRoutes = VueRouter.options.routes;
             VueRouter.options.routes = [...initRoutes,...asyncRouteMenu];
             next();
    
         } else {
             //是否处于登陆页面
             if(to.path=='/login'){ 
                 //如果是登录页面路径,就直接next()
                 next();
             } else {
                 //不然就跳转到登录;
                 next('/login');
             }
         } 
     })
    

    2.3 如何处理菜单的显示

    在App.vue里 ,原来的菜单部分

     <router-link to="/login" tag='li'>登陆</router-link> 
     <router-link to="/home?name=laney" tag='li'>主页</router-link>
     <router-link to="/news" tag='li'>新闻</router-link> 
    

    需要修改为动态的, 因为这里所有的路由 不是写死的, 需要从路由实例this.$router.options里获取

    可以在计算器属性里设置

    
      <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>权限控制- addRoutes</title>
       <link rel="stylesheet" href="css/animate.css">
       <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.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>
       		</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 News={
       		template:'<h3>我是新闻</h3>'
       	}
           //默认是可以看到的路由
       	var initRoutes=[
       		{
       			path:'/home',
       			component:Home,
       			// 路由元信息
                   meta: {
                       title: '首页'
                    }
       		},
       		{
       			path:'/user',
                   component:User,
                   meta: {
                       title: '用户'
                    },
       			// children:[
       			// 	{
       			// 		path:'login',
                   //         component:Login
       			// 	},
       			// 	{
       			// 		path:'regist/:username/:password',
                   //         component:Regist
                   //     }
    
       			// ]
               },
       		// {
       		// 	path:'*',
       		// 	redirect:'/home',
               //     hidden: true    //隐藏不需要渲染到页面上的路由
       		// }
       	];
    
       	 //需要登陆后确认权限才能看到的路由
       	 var asyncRouetes = [
            {
                path:'/finance',
                component:Finance,
                 meta: {
                    title: '财务信息',
                    roles: ['admin']
                }
       		},
       		{
               path:'/news',
               component:News,
               meta: {
                   title: '新闻中心',
                   roles: ['admin','guest']
                 }
               }
           ];
       	const routerAll=new VueRouter({
       		routes:initRoutes, //简写,相当于routes:routes
       		linkActiveClass:'active', //更新活动链接的class类名,默认的激活的 class
       		linkExactActiveClass:'active-extact',  //精确激活的 class
       		mode: "hash", //默认
       	});
    
       	导航守卫
       	//加入你获取了角色
       	routerAll.beforeEach((to, from, next) => {
       		// var auth = localStorage.getItem('userRole');
       		var auth = 'admin';
       		var asyncRouete =  asyncRouetes.filter((option,index)=>{
       			return option.meta.roles.includes(auth);
       		});
       		//将新路由添加到路由中, 如果不加组件component不能正确渲染
       		routerAll.addRoutes(asyncRouete);
       		 //为了正确渲染导航,将对应的新的路由添加到routerAll中	
       		routerAll.options.routes = [...initRoutes,...asyncRouete];
       		debugger
       		next();
       	})
       
       	new Vue({
               el:'#itapp',
       		router:routerAll, //注入路由
               computed:{
                   getMyRoutes(){
                       var thisData = this.$router.options.routes;
                       return thisData;
                   }
               },
       		methods:{
       			push(){
       				this.$router.push({path:'home'}); //添加路由,切换路由	
       			},
       			replace(){
       				routerAll.replace({path:'user'}); //替换路由,没有历史记录
       			}
               }
              
              
       	});
       </script>
    </body>
    </html>
    
    

    借助中心控制vue实例 , 利用eventEmitter

      <template>
         <div id="app">
            <h1>{{msg}} <button type="button" @click="logOut()">注销</button></h1>
            <div >
                <ul class="main-menu">
                 <router-link v-for="(item,index) in getMyRoutes" :key="index" :to="item.path" tag='li'>{{item.meta.title}}</router-link> 
                    <!-- <router-link to="/login" tag='li'>登陆</router-link> 
                    <router-link to="/home?name=laney" tag='li'>主页</router-link>
                    <router-link to="/news" tag='li'>新闻</router-link>  -->
                </ul>
            <!-- <ul @click="gotoPage($event)">
                <li tag='home'>主页</li>
                <li tag='news'>新闻</li>
            </ul>    -->
            </div>
            <router-view></router-view>
        </div>
    </template>
    
     <script>
        export default {
            name: 'app',
            data () {
                return {
                    msg: 'Welcome to ruanmou',
                    getMyRoutes:[]
                }
            },
            computed:{
                // getMyRoutes(){
                //     console.log('this.$router.options.routes')
                //     console.log(this.$router.options.routes)
                //     var thisData = this.$router.options.routes;
                //     return thisData;
                // }
            },
            methods:{
                 logOut(){
                    localStorage.clear();
                    this.$router.push({
                        path:'/login'
                    })
                    location.reload();
                  },
                gotoPage(ev){
                    var target = ev.target,
                        tag = target.getAttribute('tag');
                    switch(tag){
                        case 'home':
                            //相当于get方式
                            this.$router.push({
                                path:'/home',
                                query:{
                                    name:'laney'
                                }
                            })
                        break;
                        case 'news':
                            this.$router.push({
                                path:'/news',
                                query:{
                                    age:'10'
                                }
                            })
                        break;
                    }
                    }
            },
            mounted(){  
                EventEmitter.$on('allOption',(res)=>{
                    console.log('mounted')
                    console.log(res)
                    this.getMyRoutes = res;
                })
                console.log(this.$router.options.routes)
            }
        }
    </script>
    
    <style scoped>
    .main-menu li {
        display: inline-block;
        margin-right: 30px;
        background: #000;
        color: #fff;
        padding: 5px 20px;
        cursor: pointer;
    }
    .main-menu li.active-menu{
        background: #ff6600;
        
    }
    </style>
    
    
    展开全文
  • vue-router学习地址

    万次阅读 2020-03-24 19:25:47
    vue教程
  • html中使用vue-router

    万次阅读 2020-07-07 00:43:01
    引入vue和vue-router <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 完整的示例 <!DOCTYPE ...
  • vue-router(路由)详细教程

    万次阅读 多人点赞 2018-05-28 21:08:30
      由于Vue在开发时对路由支持的不足,于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的...
  • vue-router

    千次阅读 2019-10-20 16:34:08
    vue-router是什么 vue-router有哪几种方法 怎么只用vue-router 单页面应用: 基于路由和组件 route: 一条路由 routes:一组路由 router: 管理路由 客户端中的路由: dom元素显示或者隐藏。==》基于hash和基于...
  • Vue-router

    2019-05-18 17:27:23
    vue-router的使用 import Vue from “vue” import VueRouter from “vue-router” import Home from “./components/Home.vue” vue.config.productionTip = false Vue.use(VueRouter) const router = new Vue...
  • vue-router传递参数的几种方式

    万次阅读 多人点赞 2018-07-06 16:24:29
    vue-router传递参数分为两大类编程式的导航 router.push声明式的导航 &lt;router-link&gt;编程式的导航 router.push编程式导航传递参数有两种类型:字符串、对象。字符串字符串的方式是直接将路由地址以字符...
  • vue-router 基本使用

    万次阅读 多人点赞 2019-06-12 15:57:54
    vue-router 基本使用  路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 =>...

空空如也

1 2 3 4 5 ... 20
收藏数 26,871
精华内容 10,748
关键字:

vue-router

vue 订阅