嵌套路由和动态路由匹配

一、嵌套路由：可在单页应用框架下开发多页应用。

思想：嵌套路由其实是 router-view 的细化，router-view 第一层中包含一个 router-view，路由children路由。每一个坑挖好都要对应一个单独的组件。

配置路由对象：在嵌套路由中，下级路由的信息配置在上级路由信息对象的 children 属性里面，children 属性里面可以配置多套路由信息对象。

// 2.创建路由对象
var router = new VueRouter({
// 3.配置路由对象
　　routes:[
　　// 4.创建路由匹配的规则
　　　　{
　　　　　　// 动态路由参数以冒号开头
　　　　　　path:'/home',
　　　　　　name:'home',
　　　　　　component:Home,
　　　　　　// 嵌套路由
　　　　　　children:[
　　　　　　　　{
　　　　　　　　　　path:'song',
　　　　　　　　　　name:'song',
　　　　　　　　　　component:Song
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　path:'movie',
　　　　　　　　　　name:'movie',
　　　　　　　　　　component:Movie
　　　　　　　　}
　　　　　　]
　　　　}
　　]    
});

 代码如下:

    <div id="app"></div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        // 地址栏 路由范式
        // （1）xxx.html#/user/1 params 动态路由参数
        // （2）ooo.html#/user?userId = 1 query
        // 1.声明路由组件
        var Song = {
            template:'<div>我是歌曲组件</div>',
            created(){
                console.log(this.$route);
                console.log(this.$router);
            }
        }
        var Movie = {
            template:'<div>我是电影组件</div>',
            created(){
                console.log(this.$route);
                console.log(this.$router);
            }
        }
        // /home/song
        // /home/movie
        var Home = {
            template:` 
                <div>首页内容
                    <br/>
                    <router-link to='/home/song'>歌曲</router-link>
                    <router-link to='/home/movie'>电影</router-link>

                    <!-- 路由出口 -->
                    <router-view></router-view>
                </div>
            `
        }
        // 2.创建路由对象
        var router = new VueRouter({
            // 3.配置路由对象
            routes:[
                // 4.创建路由匹配的规则
                {
                    // 动态路由参数以冒号开头
                    path:'/home',
                    name:'home',
                    component:Home,
                    // 嵌套路由
                    children:[
                        {
                            path:'song',
                            name:'song',
                            component:Song
                        },
                        {
                            path:'movie',
                            name:'movie',
                            component:Movie
                        }
                    ]
                }
            ] 
        });
        // 5.抛出两个全局组件 router-link router-view
        // 抛出两个对象 $router $route（路由信息对象） 挂载到了Vue实例化对象
        var App = {
            template:`
                <div>
                    <!-- router-link默认会被渲染为a标签，router-view默认会被渲染为herf标签 -->
                    <router-link :to="{name:'home'}">首页</router-link> 
                    <!-- 6.路由组件的出口 -->
                    <router-view></router-view>
                </div>
            `
        };
        // 6.将配置好的路由关联到vue实例对象中
        new Vue({
            el:'#app',
            router:router,
            template:` 
                <App/>
            `,
            components:{
                App,
                router,
            }
        });
    </script>

 

 二、动态路由：组件相同，数据不同。

通过 watch 监听器中的  '$route'(to, from){ }  可对路有变化作出响应。

    <div id="app"></div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        // 地址栏 路由范式
        // （1）xxx.html#/user/1 params 动态路由参数
        // （2）ooo.html#/user?userId = 1 query
        // 1.声明路由组件
        var ComDesc = {
            data(){
                return{
                    msg:''
                }
            },
            template:`
                <div>
                    {{ msg }}
                </div>`,
            created(){
                this.msg = '安卓';
                console.log(1);
            },
　　　　　　　// 监听路由
            watch:{
                '$route'(to, from){
                    // 对路由变化作出响应
                    console.log(to);
                    console.log(from);
                    this.msg = to.params.id;
                }
            }
        }
        // /timeline/andorid
        // /timeline/frontend
        var Timeline = {
            template:` 
                <div id='timeline'>
                    <router-link :to="{name:'comDesc',params:{id:'adroid'}}">安卓</router-link>
                    <router-link :to="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
                    <!-- 路由出口 -->
                    <router-view></router-view>
                </div>
            `
        }
        var Pins = {
            template:` 
                <div>我是沸点</div>
            `
        }
        // 2.创建路由对象
        var router = new VueRouter({
            // 3.配置路由对象
            routes:[
                // 4.创建路由匹配的规则
                {
                    // 动态路由参数以冒号开头
                    path:'/timeline',
                    name:'timeline',
                    component:Timeline,
                    children:[
                        {
                            path:'/timeline/:id',
                            name:'comDesc',
                            component:ComDesc
                        }
                    ]
                },
                {
                    path:'/pins',
                    component:Pins
                }
            ]
        });
        // 5.抛出两个全局组件 router-link router-view
        // 抛出两个对象 $router $route（路由信息对象） 挂载到了Vue实例化对象
        var App = {
            template:`
                <div>
                    <!-- router-link默认会被渲染为a标签，router-view默认会被渲染为herf标签 -->
                    <router-link :to="{name:'timeline'}">首页</router-link> 
                    <router-link to='/pins'>沸点</router-link> 

                    <!-- 6.路由组件的出口 -->
                    <router-view></router-view>
                </div>
            `
        };
        // 6.将配置好的路由关联到vue实例对象中
        new Vue({
            el:'#app',
            router:router,
            template:` 
                <App/>
            `,
            components:{
                App,
                router,
            }
        });
    </script>

 

 

 相同组件，但是数据不同。