您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue路由如何定義及使用的相關(guān)知識點,內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
(1)安裝
npm install vue-router
(2)構(gòu)建文件目錄
在src目錄下創(chuàng)建一個router文件夾,然后創(chuàng)建一個index.js
(3)這里我們通過模塊化的方式進(jìn)行創(chuàng)建路由,方便代碼的管理,這里只是對路插件進(jìn)行了注冊,然后創(chuàng)建好路由對象。通過export default 關(guān)鍵字將創(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')
可以理解成,通過標(biāo)簽進(jìn)行跳轉(zhuǎn)
聲明式導(dǎo)航:<router-link :to="...">
或者 <router-link to="...">
定義路由規(guī)則
{ path:'/', component:Home name:home }
(1)router-link導(dǎo)航標(biāo)簽to屬性使用字符串方式
<router-link to="/">go to home</router-link>
(2)router-link導(dǎo)航標(biāo)簽to使用對象的方式
使用路徑進(jìn)行匹配
<router-link :to="{path:'/'}">go to home</router-link>
router-link導(dǎo)航標(biāo)簽to屬性使用對象的方式并且使用路由名稱進(jìn)行匹配
<router-link :to="{name:'home'}">go to home</router-link>
可以理解成JS進(jìn)行跳轉(zhuǎn)
編程式導(dǎo)航:router.push(...)
下面的例子包含了動態(tài)路由匹配和query查詢參數(shù)的知識,不清楚的可以先看了這兩者的內(nèi)容再回來看此處的內(nèi)容。
// 字符串 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
定義路由規(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>
通過如上的方式進(jìn)行定義,可以通過$route.params.id 獲動態(tài)路由參數(shù):id值為'01‘
注意:
當(dāng)使用對象的方式進(jìn)行匹配時候,不能通過path和params的方式。只能通過name和params的方式
如下方式,不能匹配到路由規(guī)則{path:'/user/:id'} ,如下表述只能被理解成'/user',
即使通過*通配符匹配到該路由,params也不會被傳遞過去,因為要有path這個屬性就不會去解析params的屬性了。
{ // 會匹配所有路徑 path: '*' } { // 會匹配以 `/user-` 開頭的任意路徑 path: '/user-*' }
我們通常使用*捕獲其他意外的路徑,進(jìn)行個兜底的處理,通常將其導(dǎo)航到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>
當(dāng)使用一個通配符時,$route.params 內(nèi)會自動添加一個名為 pathMatch 參數(shù)。它包含了 URL 通過通配符被匹配的部分
<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進(jìn)行傳參;
以上query傳遞過來的參數(shù)可以通過this.$route.query.name
進(jìn)行獲取。
如果路由從/user/01
導(dǎo)航到/user/02
,原來的組件實例會被復(fù)用。因為有兩個路由都渲染同一個組件,這意味著組件的生命周期鉤子不會被再次調(diào)用。因此需要通過其他方式進(jìn)行監(jiān)聽參數(shù)的變化來做出響應(yīng)。
(1)通過watch進(jìn)行監(jiān)聽
const User = { template: '...', watch: { $route(to, from) { // 對路由變化作出響應(yīng)... } } }
(2)通過導(dǎo)航守衛(wèi)進(jìn)行監(jiān)聽
const User = { template: '...', beforeRouteUpdate(to, from, next) { // react to route changes... // don't forget to call next() } }
特別地我把這三者的概念放在一起來闡述,是為了更好的去區(qū)分他們之間的區(qū)別。這些內(nèi)容都是在路由規(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,當(dāng)用戶訪問/b的時候,URL會保持/b但是路由匹配到的內(nèi)容則為/a,也就是知識URL內(nèi)容顯示/b內(nèi)容實則是/a
注意了:這里別名要使用路徑的方式去表述,而不是跟命名路由那樣直接寫名字哦~
const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] })
(3)重定向:可以理解為訪問/a的時候直接跳轉(zhuǎn)到/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 => { // 方法接收 目標(biāo)路由 作為參數(shù) // return 重定向的 字符串路徑/路徑對象 }} ] })
嵌套路由可以這么理解,所匹配的路由渲染出來的組件中包含路由組件,'/user'當(dāng)我們匹配到一個路由渲染出一個組件User,但是如果想繼續(xù)在User組件的<router-view ></router-view>繼續(xù)匹配。則我們要通過/user/childRouteName進(jìn)一步匹配。"childRouteName"就是我們路由規(guī)則children中對應(yīng)的path的值啦。
{ path: '/user', component: User, children: [ { // 當(dāng) /user//profile 匹配成功, // UserProfile 會被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 當(dāng) /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的情況下,必須是完整的路由才可以匹配正確。也就是 當(dāng) /user/profile匹配成功,但是/user這樣是無法匹配成功的。
當(dāng)一個組件上同時渲染多個視圖,注意是同級展示多個視圖,而不是嵌套展示。那此時就可以通過命名視圖來解決這個問題。
路由規(guī)則定義
{ path:"/namingRoute", components:{//注意此處components是帶's'結(jié)尾的,之前單個的時候是不帶的。 default:Home, one:PageOne, two:PageTwo } }
組件定義
<router-view></router-view>//渲染default對應(yīng)的組件 <router-view name="one"></router-view>//渲染one對應(yīng)的組件 <router-view name="two"></router-view>//渲染two對應(yīng)的組件
當(dāng)URL為:/namingRoute的時候 匹配到該路由,則會按照對應(yīng)的router-view視圖組件進(jìn)行渲染。
可以理解成通過全局router實例對象router進(jìn)行定義的守衛(wèi)。
route.beforeEach(全局前置守衛(wèi))
使用方式:
beforeEach((to,from,next)=>{ //... })
router.beforeResolve(全局解析守衛(wèi))
在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后,解析守衛(wèi)就被調(diào)用
使用方式:
router.beforeResolve((to, from, next) => { // ... })
router.afterEach (全局后置鉤子)
鉤子不會接受 next 函數(shù)也不會改變導(dǎo)航本身:
使用方式:
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) => { // ... })
可以理解成在路由規(guī)則上定義的守衛(wèi)
beforeEnter
可以理解成在組件內(nèi)定義的守衛(wèi)
beforeRouteEnter
還沒有創(chuàng)建組件實例,在該路由被confirm前調(diào)用。
const User = { template: `...`, beforeRouteEnter(to, from, next) { // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用 // 不!能!獲取組件實例 `this` // 因為當(dāng)守衛(wèi)執(zhí)行前,組件實例還沒被創(chuàng)建 } }
注意:
該守衛(wèi)不能直接使用this訪問vue實例對象,因為此時組件實例還沒有被創(chuàng)建。但是可以通過給next方法傳遞回調(diào)來方位組件的實例。
給next()傳遞回調(diào),僅在beforeRouteEnter使用有效!??!
beforeRouteEnter (to, from, next) { next(vm => { // 通過 `vm` 訪問組件實例 }) }
beforeRouteUpdate (2.2 新增)
在路由改變且該組件被服用時調(diào)用
const User = { template: `...`, beforeRouteUpdate(to, from, next) { // 在當(dāng)前路由改變,但是該組件被復(fù)用時調(diào)用 // 舉例來說,對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候, // 由于會渲染同樣的 Foo 組件,因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。 // 可以訪問組件實例 `this` } }
beforeRouteLeave
在導(dǎo)航離開該組件對應(yīng)的路由時調(diào)用
const User = { template: `...`, beforeRouteLeave(to, from, next) { // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用 // 可以訪問組件實例 `this` } }
正常首次訪問路由的執(zhí)行順序
beforeEach 全局的路由前置守衛(wèi)
beforeEnter 獨享路由守衛(wèi)
beforeRouteEnter 組件路由守衛(wèi)
beforeResolve 全局路由解析守衛(wèi)
afterEach 全局路由后置鉤子
Dom渲染
調(diào)用beforeRouteEnter 組件路由守衛(wèi)中傳遞給next的回調(diào)函數(shù)。并且把創(chuàng)建號的組件實例作為回調(diào)函數(shù)的參數(shù)傳入。
以上就是“Vue路由如何定義及使用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。