嵌套路由

嵌套路由：一个路由配置中嵌套其他的路由配置。

嵌套路由挺常用的，比如导航栏有首页、文章、想法、留言4个模块，我们以嵌套路由的形式集成这些模块，在导航栏中点击对应的条目，就会路由到对应的页面（下方显示对应的页面），和html的

 

 

demo   嵌套路由

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>title>
         引入vue.js -->
        <script src="js/vue.js">script> 
         引入路由插件 -->
        <script src="js/vue-router.js">script>
    head>
    <body>
        
    <div id="app">div>
    
    <script>
        // 导航
        var Nav={
            template:`                <div>
                    <router-link :to="{name:'nav.index'}">首页</router-link>
                    <router-link :to="{name:'nav.article'}">文章</router-link>
                    <router-link :to="{name:'nav.idea'}">想法</router-link>
                    <router-link :to="{name:'nav.message'}">留言</router-link>
                    <router-view></router-view>  
                </div>            `,
        }        
        // 首页
        var Index={
            template:`                <div>
                    <p>这是首页部分</p>
                </div>            `,
        }        
        // 文章
        var Article={
            template:`                <div>
                    <p>这是文章部分</p>
                </div>            `,
        }        
        // 想法
        var Idea={
            template:`                <div>
                    <p>这是想法部分</p>
                </div>            `,
        }            
        // 留言
        var Message={
            template:`                <div>
                    <p>这是留言部分</p>
                </div>            `,
        }            
            
        // 安装路由插件        Vue.use(VueRouter);            
        // 创建路由对象
        var router=new VueRouter({            // 配置路由规则            routes:[ 
                {path:'/',name:'nav',component:Nav,children:[   //path直接映射到根路径（当前html页面下）下，children配置要嵌套的路由,对象数组形式                    {path:'/index',name:'nav.index',component:Index},  //嵌套的路由的name里一般都要带上外部的路由容器，一看就知道关系                    {path:'/article',name:'nav.article',component:Article},
                    {path:'/idea',name:'nav.idea',component:Idea},
                    {path:'/message',name:'nav.message',component:Message},
                    {path:'',name:'nav.index',component:Index},  //要点击nav中对应的链接才会路由到指定页面，我们给它配置一个默认的路由页面，path:''                ]},
            ]
        });            
        new Vue({
            el:'#app',
            router,  //使用路由
            template:`                <div>
                    <router-view></router-view>  
                </div>            `,
        })    
    script>        
        
    body>html>

 

 

嵌套的路由的path可以使用相对路径、也可以使用绝对路径

    {path:'/nav',name:'nav',component:Nav,children:[   
           {path:'/index',name:'nav.index',component:Index}  //绝对路径
    ]}

/表示根路径（当前html页面）。index的访问路径是.....html#/index

 

    {path:'/nav',name:'nav',component:Nav,children:[   
           {path:'index',name:'nav.index',component:Index}  //相对路径，相对于外部路由
    ]}

index的访问路径是....html#/nav/index

 

 

 

 

 

路由守卫

一个页面路由到另一个页面，路由到目标页面之前可以做一些处理，比如登录检测、权限检查，不满足就不路由到目标页面，给出提示信息。

 

demo  路由守卫

    // 安装路由插件    Vue.use(VueRouter);        
    // 创建路由对象
    var router=new VueRouter({        // 配置路由规则        routes:[ 
            //.....        ]
    });        
    new Vue({
        el:'#app',
        template:`                    `,
        router,
        data(){            return{                //......            }
        },
        mounted(){
            router.beforeEach( (to,from)=>{   //路由守卫。使用ES6的箭头函数做一些前处理。2个参数分别封装了目标页面、上一个页面的信息                //......            });
        },
        
    })

路由守卫要写在html页面的new Vue()中，一般是写在mouted(){ }中。

上一个页面要传数据给目标页面，比如username、uid、loginstate、role什么的，可以在data中用一些变量保存这些数据，路由守卫根据这些数据进行登录检测、权限检测。

执行到mouted()时，数据已经挂载，可以获取到数据，路由守卫可以拿到数据进行检测啦。

beforeEach，顾名思义，每次路由到目标页面时，都会使用路由守卫进行检测。

 

现在好多应用都是mvc模式，controller那里拦截器、过滤器什么的早就对请求进行了过滤，登录检测、权限检查已经做过了，在视图这里没必要再使用路由守卫来过滤。

路由守卫用得很少，了解即可。