Vue路由router詳解
模塊化的方式使用路由插件
（1）安裝
npm install vue-router
（2）構建文件目錄
在src目錄下創(chuàng)建一個router文件夾，然后創(chuàng)建一個index.js
（3）這里我們通過模塊化的方式進行創(chuàng)建路由，方便代碼的管理，這里只是對路插件進行了注冊，然后創(chuàng)建好路由對象。通過export default 關鍵字將創(chuàng)建好的路由對象暴露出去。
//index.js
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from "../views/Home";
Vue.use(VueRouter)//注冊路由插件
export default new VueRouter({
routes:[{
path:'/',
component:Home
}]
})
（4）在入口文件main.js引入創(chuàng)建好的路由對象，并且把他掛載到Vue實例中。
//main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/store'
import router from '@/router'//這里就是引入了我們創(chuàng)建好的路由對象。模塊化的編程思維
Vue.config.productionTip = false
Vue.prototype.bus = new Vue()
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
使用路由
聲明式導航
可以理解成，通過標簽進行跳轉
聲明式導航:<router-link :to="..."> 或者 <router-link to="...">
定義路由規(guī)則
{
path:'/',
component:Home
name:home
}
（1）router-link導航標簽to屬性使用字符串方式
<router-link to="/">go to home</router-link>
（2）router-link導航標簽to使用對象的方式
使用路徑進行匹配
<router-link :to="{path:'/'}">go to home</router-link>
router-link導航標簽to屬性使用對象的方式并且使用路由名稱進行匹配
<router-link :to="{name:'home'}">go to home</router-link>
編程式導航
可以理解成JS進行跳轉
編程式導航:router.push(...)
下面的例子包含了動態(tài)路由匹配和query查詢參數(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 與params配合或手寫完整的帶有參數(shù)的 path：
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 }}) // -> /user
動態(tài)路由匹配
定義路由規(guī)則
{
path:'/user/:id',
component:User
name:user
}
<router-link to="/user/01">go to home</router-link>
<router-link :to="{path:'/user/01'}">go to home</router-link>
<router-link :to="{name:'/user',params={id:'01'}}">go to home</router-link>
通過如上的方式進行定義，可以通過$route.params.id 獲動態(tài)路由參數(shù):id值為'01‘
注意：
當使用對象的方式進行匹配時候，不能通過path和params的方式。只能通過name和params的方式
如下方式，不能匹配到路由規(guī)則{path:'/user/:id'} ，如下表述只能被理解成'/user'，
即使通過*通配符匹配到該路由，params也不會被傳遞過去，因為要有path這個屬性就不會去解析params的屬性了。
{
// 會匹配所有路徑
path: '*'
}
{
// 會匹配以 `/user-` 開頭的任意路徑
path: '/user-*'
}
通配符匹配路徑
我們通常使用*捕獲其他意外的路徑，進行個兜底的處理，通常將其導航到404錯誤頁面。
<router-link to=“/user?name=zhangsan">...</router-link>
<router-link :to="{path:'/user?zhangsan'}">...</router-link>
<router-link :to="{path:'/user',query:{name:'zhangsan'}}">...</router-link>
<router-link :to="{name:'user',query:{name:'zhangsan'}}">...</router-link>
當使用一個通配符時，$route.params 內會自動添加一個名為 pathMatch 參數(shù)。它包含了 URL 通過通配符被匹配的部分
查詢參數(shù)query
<router-link to=“/user?name=zhangsan">...</router-link>
<router-link :to="{path:'/user?zhangsan'}">...</router-link>
<router-link :to="{path:'/user',query:{name:'zhangsan'}}">...</router-link>
<router-link :to="{name:'user',query:{name:'zhangsan'}}">...</router-link>
查詢參數(shù)不想動態(tài)路由參數(shù)匹配那樣，就算使用了path，依然可以使用query進行傳參;
以上query傳遞過來的參數(shù)可以通過this.$route.query.name進行獲取。
響應路由參數(shù)的變化
如果路由從/user/01導航到/user/02，原來的組件實例會被復用。因為有兩個路由都渲染同一個組件，這意味著組件的生命周期鉤子不會被再次調用。因此需要通過其他方式進行監(jiān)聽參數(shù)的變化來做出響應。
（1）通過watch進行監(jiān)聽
const User = {
template: '...',
watch: {
$route(to, from) {
// 對路由變化作出響應...
}
}
}
（2）通過導航守衛(wèi)進行監(jiān)聽
const User = {
template: '...',
beforeRouteUpdate(to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
命名路由，路由別名，重定向
特別地我把這三者的概念放在一起來闡述，是為了更好的去區(qū)分他們之間的區(qū)別。這些內容都是在路由規(guī)則去配置的。
{
path: '/pageOne',
component:PageOne,
alias:"/firstPage",
name:"pageOne",
redirect:{name:'pageTwo'}
},
{
path: '/pageTwo',
component:PageTwo,
name:'pageTwo'
}
（1）命名路由：可以理解成給這個路由取個名字
即使通過name屬性給路由取一個名字
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
（2）路由別名：可以理解成這個路由的第二個名字。
例如：/a的別名是/b,當用戶訪問/b的時候，URL會保持/b但是路由匹配到的內容則為/a，也就是知識URL內容顯示/b內容實則是/a
注意了：這里別名要使用路徑的方式去表述，而不是跟命名路由那樣直接寫名字哦~
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
（3）重定向：可以理解為訪問/a的時候直接跳轉到/b
重定向的表述有三種形式：
- 字符串
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
- 對象
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
- 方法
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目標路由 作為參數(shù)
// return 重定向的 字符串路徑/路徑對象
}}
]
})
嵌套路由
嵌套路由可以這么理解，所匹配的路由渲染出來的組件中包含路由組件，'/user'當我們匹配到一個路由渲染出一個組件User，但是如果想繼續(xù)在User組件的<router-view ></router-view>繼續(xù)匹配。則我們要通過/user/childRouteName進一步匹配。"childRouteName"就是我們路由規(guī)則children中對應的path的值啦。
{
path: '/user',
component: User,
children: [
{
// 當 /user//profile 匹配成功，
// UserProfile 會被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 當 /user//posts 匹配成功
// UserPosts 會被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
APP.Vue中
<div id="app"> <router-view></router-view> </div>
User組件中
const User = {
template: `
<div class="user">
<span>User組件</span>
<router-view></router-view>
</div>
`
}
注意：
定義了嵌套路由，即定義了children的情況下，必須是完整的路由才可以匹配正確。也就是 當 /user/profile匹配成功，但是/user這樣是無法匹配成功的。
命名視圖
當一個組件上同時渲染多個視圖，注意是同級展示多個視圖，而不是嵌套展示。那此時就可以通過命名視圖來解決這個問題。
路由規(guī)則定義
{
path:"/namingRoute",
components:{//注意此處components是帶's'結尾的，之前單個的時候是不帶的。
default:Home,
one:PageOne,
two:PageTwo
}
}
組件定義
<router-view></router-view>//渲染default對應的組件
<router-view name="one"></router-view>//渲染one對應的組件
<router-view name="two"></router-view>//渲染two對應的組件
當URL為:/namingRoute的時候 匹配到該路由，則會按照對應的router-view視圖組件進行渲染。
導航守衛(wèi)
（1）全局守衛(wèi)
可以理解成通過全局router實例對象router進行定義的守衛(wèi)。
- route.beforeEach（全局前置守衛(wèi)）
使用方式：
beforeEach((to,from,next)=>{
//...
})
- router.beforeResolve（全局解析守衛(wèi)）
在所有組件內守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調用
使用方式：
router.beforeResolve((to, from, next) => {
// ...
})
- router.afterEach （全局后置鉤子）
鉤子不會接受 next 函數(shù)也不會改變導航本身：
使用方式：
router.afterEach((to, from) => {
// ...
})
使用的位置：通常在router文件夾下的index.js
const router = new VueRouter({ ... })
//全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
// ...
})
//全局解析守衛(wèi)
router.beforeResolve((to, from, next) => {
// ...
})
//全局后置鉤子
router.afterEach((to, from) => {
// ...
})
（2）路由獨享守衛(wèi)
可以理解成在路由規(guī)則上定義的守衛(wèi)
- beforeEnter
（3）組件內守衛(wèi)
可以理解成在組件內定義的守衛(wèi)
- beforeRouteEnter
還沒有創(chuàng)建組件實例，在該路由被confirm前調用。
const User = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 因為當守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建
}
}
注意：
該守衛(wèi)不能直接使用this訪問vue實例對象，因為此時組件實例還沒有被創(chuàng)建。但是可以通過給next方法傳遞回調來方位組件的實例。
給next()傳遞回調，僅在beforeRouteEnter使用有效?。?！
beforeRouteEnter (to, from, next) {
next(vm => {
// 通過 `vm` 訪問組件實例
})
}
- beforeRouteUpdate (2.2 新增)
在路由改變且該組件被服用時調用
const User = {
template: `...`,
beforeRouteUpdate(to, from, next) {
// 在當前路由改變，但是該組件被復用時調用
// 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
// 可以訪問組件實例 `this`
}
}
- beforeRouteLeave
在導航離開該組件對應的路由時調用
const User = {
template: `...`,
beforeRouteLeave(to, from, next) {
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
}
}
導航解析的流程
正常首次訪問路由的執(zhí)行順序
- beforeEach 全局的路由前置守衛(wèi)
- beforeEnter 獨享路由守衛(wèi)
- beforeRouteEnter 組件路由守衛(wèi)
- beforeResolve 全局路由解析守衛(wèi)
- afterEach 全局路由后置鉤子
- Dom渲染
- 調用beforeRouteEnter 組件路由守衛(wèi)中傳遞給next的回調函數(shù)。并且把創(chuàng)建號的組件實例作為回調函數(shù)的參數(shù)傳入。
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
下面小編就為大家分享一篇vue-cli腳手架引入圖片的幾種方法總結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue微信分享，在當前頁面分享其他頁面，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
uni-app提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個API獲取系統(tǒng)信息，系統(tǒng)信息返回的內容非常多，各操作系統(tǒng)、各家小程序、各瀏覽器對它們的定義也不相同2022-11-11
開發(fā)項目有一段時間了,隨著項目越來越大,打包的時間也相應的變長了,打包時的內存也增多了,這時候產生了一個問題,在發(fā)布項目的時候,會出現(xiàn)Vue熱更新出現(xiàn)內存溢出的問題,所以本文給大家介紹了Vue熱更新出現(xiàn)內存溢出的解決方法,需要的朋友可以參考下2024-05-05
在項目中經常會遇到圖片上傳功能，今天腳本之家小編給大家?guī)砹耸褂肰ue實現(xiàn)圖片上傳的三種方式，感興趣的朋友一起看看吧2018-07-07
茶余飯后聊聊Vue3.0響應式數(shù)據(jù)那些事兒
這篇文章主要介紹了茶余飯后聊聊Vue3.0響應式數(shù)據(jù)那些事兒，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Element-ui 自帶的兩種遠程搜索(模糊查詢)用法講解
這篇文章主要介紹了Element-ui 自帶的兩種遠程搜索(模糊查詢)用法講解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要為大家詳細介紹了Vue實現(xiàn)動態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue-cli 引入axios的方法,文中還給大家提到了vue-cli 配置axios的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vite打包優(yōu)化分片打包依賴包,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07