一、路由嵌套參數的傳遞
傳參數的兩種方式：
1.使用查詢字元串（例如：login?name=tom&psw=123），通過{{$router.query}}擷取參數
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>路由參數傳遞</title>
6 <style>
7 /*設定連結點選後的顔色*/
8 .active{
9 color: red;
10 font-size: 24px;
11 /*去除下劃線*/
12 text-decoration: none;
13 }
14 </style>
15 <!--引入vue-->
16 <script src="../js/vue.js"></script>
17 <!-- 引入vue-router -->
18 <script src="../js/vue-router.min.js"></script>
19 </head>
20 <body>
21
22 <div id="hello">
23 <div>
24 <!-- 使用router-link元件來定義導航，to屬性指定連結url -->
25 <router-link to='/home'>首頁</router-link>
26 <router-link to='/news'>新聞</router-link>
27 <router-link to='/user'>使用者</router-link>
28 </div>
29 <div>
30 <!-- router-view用來顯示路由内容 -->
31 <router-view></router-view>
32 </div>
33 </div>
34
35 <template id="user">
36 <div>
37 <h4>使用者資訊</h4>
38 <ul>
39 <li><router-link to='/user/login?name=tom&psw=123'>登入</router-link></li>
40 <li><router-link to='/user/regist/alice/456'>注冊</router-link></li>
41 </ul>
42 <!-- router-view用來顯示路由内容 -->
43 <router-view></router-view>
44 </div>
45 </template>
46
47 <script>
48 //1.定義元件
49 var Home={
50 template:'<h3>我是首頁</h3>'
51 }
52 var News={
53 template:'<h3>我是新聞</h3>'
54 }
55 var User={
56 template:'#user'
57 }
58 var Login={
59 template:'<h5>使用者登入的界面 使用者名：{{$route.query.name}} 密碼：{{$route.query.psw}}</h5>'
60 }
61 var Regist={
62 template:'<h5>使用者注冊的界面 使用者名：{{$route.params.username}} 密碼：{{$route.params.password}}</h5>'
63 }
64
65 //2.配置路由
66 const routes=[
67 {path:'/home',component:Home},
68 {path:'/news',component:News},
69 {
70 path:'/user',
71 component:User,
72 children:[ //配置子路由
73 {path:'login',component:Login},
74 {path:'regist/:username/:password',component:Regist}
75 ]
76 },
77 {path:'*',redirect:'/home'} //路由重定向，實作預設顯示首頁
78 ]
79
80 //3.建立路由執行個體
81 const router=new VueRouter({
82 routes:routes, //第一個routes是選項，第二個routes是配置路由時自定義的變量名。二者同名，可以直接簡寫為routes
83 mode:'history', //路由的模式設定為history（預設為hash模式）
84 linkActiveClass:'active' //更改活動連結的class類名
85 });
86
87 //4.将建立的路由執行個體挂載到Vue執行個體上
88 let vm = new Vue({
89 el:'#hello',
90 router:router //第一個router是選項，第二個router是建立路由執行個體時自定義的變量名。二者同名，可以直接簡寫為router
91 });
92 </script>
93 </body>
94 </html> 二、實作效果