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)
       }
    }
});