Vue-router路由基础总结（一）
一、安裝
npm下載：npm install vue-router
如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：在你的文件夾下的 src 文件夾下的 main.js 文件內(nèi)寫入以下代碼
import Vue from 'vue' import VueRouter from 'vue-router'Vue.use(VueRouter)二、基本使用
html方面：
1、配置導(dǎo)航：使用 router-link 組件來導(dǎo)航，通過傳入 `to` 屬性指定鏈接，<router-link> 默認會被渲染成一個 `<a>` 標簽
2、路由出口：使用 <router-view> 配置路由出口，路由匹配到的組件將渲染在這里
JS方面：定義路由組件，定義路由，創(chuàng)建路由實例，掛載
<!DOCTYPE html> <html> <head><meta charset="utf-8"> </head><body><div id="box"><router-link to="/one">one</router-link><router-link to="/two">two</router-link><router-view></router-view></div><!--定義模版--><template id="a"><div>第一個router</div></template><template id="b"><div>第二個router</div></template><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><script>//1、定義路由和路由組件var routes=[{path:"/one",component:{template:"#a"}},{path:"/two",component:{template:"#b"}}];//2、創(chuàng)建 router 實例，然后傳 `routes` 配置var router = new VueRouter({routes // （縮寫）相當于 routes: routes });//3、創(chuàng)建和掛載根實例。記得要通過 router 配置參數(shù)注入路由，從而讓整個應(yīng)用都有路由功能new Vue({el:"#box",router})</script></body> </html>要注意，當 <router-link> 對應(yīng)的路由匹配成功，將自動設(shè)置 class 屬性值 .router-link-active
三、動態(tài)路由匹配
我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對于所有 ID 各不相同的用戶，都要使用這個組件來渲染。那么，我們可以在 vue-router 的路由路徑中使用『動態(tài)路徑參數(shù)』（dynamic segment）來達到這個效果：
const User = {template: '<div>User</div>' }const router = new VueRouter({routes: [// 動態(tài)路徑參數(shù) 以冒號開頭{ path: '/user/:id', component: User }] })現(xiàn)在呢，像 /user/foo 和 /user/bar 都將映射到相同的路由。
一個『路徑參數(shù)』使用冒號 : 標記。當匹配到一個路由時，參數(shù)值會被設(shè)置到 this.$route.params，可以在每個組件內(nèi)使用。于是，我們可以更新 User 的模板，輸出當前用戶的 ID：$route.params.id獲取值
const User = {template: '<div>User {{ $route.params.id }}</div>' }你可以在一個路由中設(shè)置多段路徑參數(shù)，對應(yīng)的值都會設(shè)置到 $route.params 中。例如：
除了 $route.params 外，$route 對象還提供了其它有用的信息，例如，$route.query（如果 URL 中有查詢參數(shù)）、$route.hash 等等。你可以查看 API 文檔 的詳細說明。
四、響應(yīng)路由參數(shù)的變化
當使用路由參數(shù)時，例如從 /user/foo 導(dǎo)航到 /user/bar，原來的組件實例會被復(fù)用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。
復(fù)用組件時，想對路由參數(shù)的變化作出響應(yīng)的話，你可以簡單地 watch（監(jiān)測變化） $route 對象：
const User = {template: '...',watch: {'$route' (to, from) {// 對路由變化作出響應(yīng)... }} }或使用 2.2 中引入的 beforeRouteUpdate 守衛(wèi)：
const User = {template: '...',beforeRouteUpdate (to, from, next) {// react to route changes...// don't forget to call next() } }五、嵌套路由
我們經(jīng)常將動態(tài)路由和嵌套路由共同使用，嵌套路由即是在原路由的基礎(chǔ)上增加一個 children 。children 是一個數(shù)組，并且我們還需要在原來的組件上添加< router-view >來渲染 chlidren 里面的路由。
<template id="b"><div>第二個router<router-view></router-view> </div> </template> <template id="c"><div>user:{{ $route.params.id }}</div> </template> {path:"/two",component:{template:"#b"},children:[{path:":id",component:{template:"#c"}}] },這樣我們就可以這樣添加地址
?
注意：要在嵌套的出口中渲染組件，需要在 VueRouter 的參數(shù)中使用 children 配置：
const router = new VueRouter({routes: [{ path: '/user/:id', component: User,children: [{// 當 /user/:id/profile 匹配成功，// UserProfile 會被渲染在 User 的 <router-view> 中path: 'profile',component: UserProfile},{// 當 /user/:id/posts 匹配成功// UserPosts 會被渲染在 User 的 <router-view> 中path: 'posts',component: UserPosts}]}] })上面path給了具體的匹配值，對應(yīng)不同的組件模板，也可以像我們上面那樣給定冒號形式，就統(tǒng)一用的一個模板。
要注意，以 / 開頭的嵌套路徑會被當作根路徑。 這讓你充分的使用嵌套組件而無須設(shè)置嵌套的路徑。
你會發(fā)現(xiàn)，children 配置就是像 routes 配置一樣的路由配置數(shù)組，所以呢，你可以嵌套多層路由。
此時，基于上面的配置，當你訪問 /user/foo 時，User 的出口是不會渲染任何東西，這是因為沒有匹配到合適的子路由。如果你想要渲染點什么，可以提供一個 空的子路由：
const router = new VueRouter({routes: [{path: '/user/:id', component: User,children: [// 當 /user/:id 匹配成功，// UserHome 會被渲染在 User 的 <router-view> 中{ path: '', component: UserHome },// ...其他子路由 ]}] })六、編程式導(dǎo)航
除了使用 <router-link> 創(chuàng)建 a 標簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)。
router.push(location)想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。
當你點擊 <router-link> 時，這個方法會在內(nèi)部調(diào)用，所以說，點擊 <router-link :to="..."> 等同于調(diào)用 router.push(...)。該方法的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。例如：
// 字符串 router.push('home')// 對象 router.push({ path: 'home' })// 命名的路由 router.push({ name: 'user', params: { userId: 123 }})// 帶查詢參數(shù)，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})注意：如果提供了 path，params 會被忽略，上述例子中的 query 并不屬于這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有參數(shù)的 path：
同樣的規(guī)則也適用于 router-link 組件的 to 屬性。
const userId = 123 router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 這里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /userrouter.replace(location)：跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。
router.go(n)：這個方法的參數(shù)是一個整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。
// 在瀏覽器記錄中前進一步，等同于 history.forward() router.go(1)// 后退一步記錄，等同于 history.back() router.go(-1)// 前進 3 步記錄 router.go(3)// 如果 history 記錄不夠用，那就默默地失敗唄 router.go(-100) router.go(100)在 2.2.0+，可選的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回調(diào)作為第二個和第三個參數(shù)。這些回調(diào)將會在導(dǎo)航成功完成 (在所有的異步鉤子被解析之后) 或終止 (導(dǎo)航到相同的路由、或在當前導(dǎo)航完成之前導(dǎo)航到另一個不同的路由) 的時候進行相應(yīng)的調(diào)用。
注意：如果目的地和當前路由相同，只有參數(shù)發(fā)生了改變 (比如從一個用戶資料到另一個 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 來響應(yīng)這個變化 (比如抓取用戶信息)。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的Vue-router路由基础总结（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【ZZ】详解哈希表的查找
- 下一篇： Vue2.x 踩坑与总结