Vue.js 相關知識（路由）
阿新 • • 發佈：2018-05-21
system 區分 ext htm 文件 children 對象 9.png 下載地址
1. 簡介
路由，工作原理與路由器相似（路由器將網線總線的IP分發到每一臺設備上），Vue中的路由根據用戶在網頁中的點擊，將其引導到對應的頁面。
2. 使用步驟
安裝vue-router或者直接引入vue-router.js（下載地址：https://router.vuejs.org/）
例：SPA頁面（Single Page Application，將一個網站的所有頁面寫在一個文件，通過不同的div進行區分，再通過div的顯示、隱藏實現跳轉效果）
- 定義組件對象（頁面）、組件模板、註冊組件
- 定義router-link、router-view
- router-link：組件會被解析為a標簽
- router-view：路由顯示的內容會在 router-view 中顯示
- 定義路由規則
- 註冊到根組件中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> </head> <body> <div id="app"> <!-- 4. 定義router-link、router-view --> <div> <router-link to=‘/home‘>首頁</router-link> <router-link to=‘/setting‘>設置</router-link> <router-view></router-view> </div></div> <!-- 2. 定義組件模板 --> <template id="home"> <div> <h3>首頁頁面</h3> </div> </template> <template id="setting"> <div> <h3>設置頁面</h3> </div> </template> <script type="text/javascript"> //1. 定義組件對象 let Home = {template:‘#home‘} let Setting = {template:‘#setting‘} //5. 定義路由規則 let route = new VueRouter({ routes:[ { path:‘/home‘, component:Home }, { path:‘/setting‘, component:Setting } ] }) let app = new Vue({ el:"#app", //3. 註冊到根組件中 components:{ Home, Setting }, //6. 註冊到根組件中 router:route }) </script> </body> </html>
3. 嵌套路由
實際開發時，一個頁面常會嵌套多個組件（頁面），如：設置頁面中包括個人設置、系統設置等
- 定義組件對象、組件模板、註冊組件
- 定義router-link、router-view
- 嵌套的路由，router-link、router-view 定義在嵌套的地方
- 定義路由規則
- 嵌套的路由，通過 children 屬性定義
<div id="app"> <!-- 4. 定義router-link、router-view --> <div> <router-link to=‘/home‘>首頁</router-link> <router-link to=‘/setting‘>設置</router-link> <router-view></router-view> </div> </div> <!-- 2. 定義組件模板 --> <template id="home"> <div> <h3>首頁頁面</h3> </div> </template> <template id="setting"> <div> <h3>設置頁面</h3> <router-link to="/setting/user">個人設置</router-link> <router-link to="/setting/system">系統設置</router-link> <router-view></router-view> </div> </template> <template id="user"> <div> <h3>個人設置頁面</h3> </div> </template> <template id="system"> <div> <h3>系統設置頁面</h3> </div> </template> <script type="text/javascript"> //1. 定義組件對象 let Home = {template:‘#home‘} let Setting = {template:‘#setting‘} let User = {template:‘#user‘} let System = {template:‘#system‘} //5. 定義路由規則 let route = new VueRouter({ routes:[ { path:‘/home‘, component:Home }, { path:‘/setting‘, component:Setting, children:[ { path:‘/setting/user‘, component:User }, { path:‘/setting/system‘, component:System } ] } ] }) let app = new Vue({ el:"#app", //3. 註冊到根組件中 components:{ Home, Setting, User, System }, //6. 註冊到根組件中 router:route }) </script>
4. 動態路由
同一個路由地址，根據傳遞的不同參數，顯示不同的內容，如：商品詳情頁，多個商品共用一個頁面（帶有動態參數）
- 定義路由規則時，將動態參數使用 :變量 進行參數綁定
<div id="app"> <!-- 4. 定義router-link、router-view --> <div> <router-link to=‘/detail/1‘>手機1</router-link> <router-link to=‘/detail/2‘>手機2</router-link> <router-view></router-view> </div> </div> <!-- 2. 定義組件模板 --> <template id="detail"> <div> <h3>商品詳情頁</h3> <p>商品id是：{{this.$route.params.id}}</p> </div> </template> <script type="text/javascript"> //1. 定義組件對象 let Detail = {template:‘#detail‘} //5. 定義路由規則 let route = new VueRouter({ routes:[ { //說明：該處為動態參數，通過this.$route.params.id獲取 path:‘/detail/:id‘, component:Detail } ] }) let app = new Vue({ el:"#app", //3. 註冊到根組件中 components:{ Detail }, //6. 註冊到根組件中 router:route }) </script>
5. 編程式路由
編程式路由，通過js代碼實現頁面跳轉，類似 js 代碼 window.location 實現頁面跳轉
<div id="app"> <div> <button @click="show">查看手機2商品詳情</button><br> <router-link to=‘/detail/1‘>手機1</router-link> <router-link to=‘/detail/2‘>手機2</router-link> <router-view></router-view> </div> </div> <template id="detail"> <div> <h3>商品詳情頁</h3> <p>商品id是：{{this.$route.params.id}}</p> </div> </template> <script type="text/javascript"> let Detail = {template:‘#detail‘} let route = new VueRouter({ routes:[ { path:‘/detail/:id‘, component:Detail } ] }) let app = new Vue({ el:"#app", components:{ Detail }, router:route, methods:{ show(){ this.$router.push({path:‘/detail/2‘}) } } }) </script>
6. 路由重定向
重定向，當訪問一個路由地址時，自動跳轉至其他的路由地址
例：當打開路由頁面時，不顯示任何內容（默認無匹配的路由規則）
例子代碼
修改代碼（在routes中添加紅色部分的內容）
routes:[ { path:‘/home‘, component:Home }, { path:‘/‘, redirect:‘/home‘, component:Home }, {……} ]
直接打開當前頁面時，自動跳轉到/home頁面（重定向）
Vue.js 相關知識（路由）