2018年11月11日关于Vue的子路由 and 手动访问和传参

1、子路由

//在HTML中的相关代码
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/张三三">张三三</router-link>
        <router-link to="/user/李四四">李四四</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>

//在Vue.js中的相关代码
var nqy = [
    {
        path:'/',
        component:{
            template:`
                <div>
                 <h1>首页</h1>
                </div>
            `,
        }
    } ,
    {
        path:'/about',
        component:{
            template:`
                <div>
                 <h1>关于我们</h1>
                </div>
            `,
        }
    },
    {
        path:'/user/:name',
        component:{
            template:`
            <div>
                <div>我的名字叫：{{$route.params.name}}</div>
                <router-link to="more" append>更多信息</router-link>
                <router-view></router-view>
            </div>
            `,
        },
        children:[
            {
                path:'more',
                component:{
                    template:`
                        <div>
                            <div>{{$route.params.name}}的个人信息</div>
                            <div>how are you ? i am fine ,thank you , and you?how are you ? i am fine ,thank you , and you?</div>
                        </div>
                    `,
                }
            }
        ]
    }

];

var nyp = new VueRouter({
    routes:nqy,
});

var app = new Vue({
   el:'#app',
    router:nyp,
});

2、手动访问和传参

//在HTML中相关代码
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/张三三">张三三</router-link>
        <router-link to="/user/李四四">李四四</router-link>
        <button @click="surf">漫游</button>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>

//在Vue.js中的相关代码
var nqy = [
    {
        path:'/',
        component:{
            template:`
                <div>
                 <h1>首页</h1>
                </div>
            `,
        }
    } ,
    {
        path:'/about',
        component:{
            template:`
                <div>
                 <h1>关于我们</h1>
                </div>
            `,
        }
    },
    {
        path:'/user/:name',
        name:'user',
        component:{
            template:`
            <div>
                <div>我的名字叫：{{$route.params.name}}</div>
                <router-link to="more" append>更多信息</router-link>
                <router-view></router-view>
            </div>
            `,
        },
        children:[
            {
                path:'more',
                component:{
                    template:`
                        <div>
                            <div>{{$route.params.name}}的个人信息</div>
                            <div>how are you ? i am fine ,thank you , and you?how are you ? i am fine ,thank you , and you?</div>
                        </div>
                    `,
                }
            }
        ]
    }

];

var nyp = new VueRouter({
    routes:nqy,
});

var app = new Vue({
   el:'#app',
    router:nyp,
    methods:{
       surf:function () {
           setTimeout(function () {
               this.nyp.push('/about');
               setTimeout(function () {
                   this.nyp.push({name:'user',params:{name:'张三三'}})
               },2000)
           },2000)
       }
    }
});