1 <div id="itany">
 2     <div>
 3         <router-link to="/home">主頁</router-link>
 4         <router-link to="/user">用戶</router-link>
 5     </div>
 6     <div>
 7         <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"
 
>
 8             <router-view></router-view>
 9         </transition>
10     </div>
11 
12     <hr>
13     <button @click="push">添加路由</button>
14     <button @click="replace">替換路由</button>
15 </div>
16 
17 <template id="user">
18     <
 
div>
19         <h3>用戶信息</h3>
20         <ul>
21             <router-link to="/user/login?name=tom&pwd=123" tag="li">用戶登陸</router-link>
22             <router-link to="/user/regist/alice/456" tag="li">用戶註冊</router-link>
23         </ul>
24         <router-view
 
></router-view>
25     </div>
26 </template>
27 
28 <script>
29     var Home={
30         template:‘<h3>我是主頁</h3>‘
31     }
32     var User={
33         template:‘#user‘
34     }
35     var Login={
36         template:‘<h4>用戶登陸。。。獲取參數：{{$route.query}},{{$route.path}}</h4>‘
37     }
38     var Regist={
39         template:‘<h4>用戶註冊。。。獲取參數：{{$route.params}},{{$route.path}}</h4>‘
40     }
41 
42     const routes=[
43         {
44             path:‘/home‘,
45             component:Home
46         },
47         {
48             path:‘/user‘,
49             component:User,
50             children:[
51                 {
52                     path:‘login‘,
53                     component:Login
54                 },
55                 {
56                     path:‘regist/:username/:password‘,
57                     component:Regist
58                 }
59             ]
60         },
61         {
62             path:‘*‘,
63             redirect:‘/home‘
64         }
65     ]
66 
67     const router=new VueRouter({
68         routes, //簡寫，相當於routes:routes
69         linkActiveClass:‘active‘ //更新活動鏈接的class類名
70     });
71 
72     new Vue({
73         el:‘#itany‘,
74         router, //註入路由
75         methods:{
76             push(){
77                 router.push({path:‘home‘}); //添加路由，切換路由
78             },
79             replace(){
80                 router.replace({path:‘user‘}); //替換路由，沒有歷史記錄
81             }
82         }
83     });
84 </script>
85 </body>

路由嵌套和參數傳遞