都是雙頻無線路由,Vue路由怎麼這麼秀？
- 2020 年 1 月 2 日
- 筆記
本文標識 : V00015
本文編輯 : Jack 風 編程工具 : Vscode 閱讀時長 : 6分鐘
什麼是路由
路由分類
- 對於普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應伺服器上對應的資源；
- 對於單頁面應用程式來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程式中的頁面跳轉主要用hash實現； 在單頁面應用程式中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由);
在 vue 中使用 vue-router
1.導入 vue-router 組件類庫：
<!-- 1. 導入 vue-router 組件類庫 --> <script src="./lib/vue-router-2.7.0.js"></script>
2.使用 router-link 組件來導航
<!-- 2. 使用 router-link 組件來導航 --> <router-link to="/login">登錄</router-link> <router-link to="/register">註冊</router-link>
3.使用 router-view 組件來顯示匹配到的組件
<!-- 3. 使用 router-view 組件來顯示匹配到的組件 --> <router-view></router-view>
4.創建使用`Vue.extend`創建組件
// 4.1 使用 Vue.extend 來創建登錄組件 var login = Vue.extend({ template: '<h1>登錄組件</h1>' }); // 4.2 使用 Vue.extend 來創建註冊組件 var register = Vue.extend({ template: '<h1>註冊組件</h1>' });
5. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
// 5. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則 var router = new VueRouter({ routes: [ { path: '/login', component: login }, { path: '/register', component: register } ] });
6. 使用 router 屬性來使用路由規則
// 6. 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', router: router // 使用 router 屬性來使用路由規則 });
· 設置路由高亮
· 設置路由切換動效
· 在路由規則中定義參數
1.在規則中定義參數：：
{ path: '/register/:id', component: register }
2.通過 this.$route.params來獲取路由中的參數：
var register = Vue.extend({ template: '<h1>註冊組件 — {{this.$route.params.id}}</h1>' // 歡迎關注A2Data，感謝您的支援。 });
使用 `children` 屬性實現路由嵌套
<div id="app"> <router-link to="/account">Account</router-link> <router-view></router-view> </div> <script> // 父路由中的組件 const account = Vue.extend({ template: `<div> 這是account組件 <router-link to="/account/login">login</router-link> | <router-link to="/account/register">register</router-link> <router-view></router-view> </div>` }); // 子路由中的 login 組件 const login = Vue.extend({ template: '<div>登錄組件</div>' }); // 子路由中的 register 組件 const register = Vue.extend({ template: '<div>註冊組件</div>' }); // 路由實例 var router = new VueRouter({ routes: [ { path: '/', redirect: '/account/login' }, // 使用 redirect 實現路由重定向 { path: '/account', component: account, children: [ // 通過 children 數組屬性，來實現路由的嵌套 { path: 'login', component: login }, // 注意，子路由的開頭位置，不要加 / 路徑符 { path: 'register', component: register } ] } ] }); // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, components: { account }, router: router }); </script>
