閱讀時間預估:6分鐘
啥是Vue Router?
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌,在我們專案中也是必會技能之一。下面我想通過以下幾個方面來分享。
一、整合Vue Router
-
1.如果安裝了vue腳手架cli3 在create專案的時候會有安裝Vue router的選項,選中敲空格就會預設安裝Vue router
-
2.如果在create專案的時候沒有自動安裝,那麼要手動進行安裝.
npm i vue-router --save
複製程式碼- 3.安裝好vue-router後最好在src檔案下建立一個router.js來專門管理整個專案的路由結構
二、使用Vue Router
1.簡單構建一個通過瀏覽器輸入訪問地址的路由
- 1.
src目錄下建立一個router.js檔案然後在檔案中構建路由陣列並匯出,一定要注意構建路由陣列是routes而不是routers哦!!
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
// 構建路由陣列
routes: [{
}]
})
複製程式碼- 2.在
main.js檔案中全域性引用router.js並掛載到專案中
// 引入router.js
import router from 'router.js'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
複製程式碼目標:通過路由localhost:8080/#/home跳轉到Home元件介面
- 3.構建一個Home.vue的元件,
在router.js中構建
routes的配置
import Vue from 'vue'
import Router from 'vue-router'
// 引入views
import Home from './views/Home.vue'
Vue.use(Router);
export default new Router({
routes: [{
path: '/home',
name: 'home',
component: Home
}]
})
複製程式碼- 4.給
Home元件配置出口<router-view></router-view>,這一步非常關鍵!!沒有出口,是不會顯示出來的.
在App.vue中
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
複製程式碼至此一個簡單的路由配置就完美的配置完了,瀏覽器輸入localhost:8080/#/home就可以訪問啦!如果有多個元件需要配置路由,都可以在router.js中配置.
引入圖片
2.router-link
說明:router-link其實就是封裝的a標籤
<router-link to="/home">Home</router-link>
複製程式碼3.vue-router配置子路由
說明:訪問二級或三級頁面的時候需要配置子路由.
App.vue
<template>
<div id="app">
<p>導航 ：
<router-link to="/">首頁</router-link> |
<router-link to="/home">Home頁面</router-link> |
<router-link to="/home/about">-About介面</router-link> |
<router-link to="/home/me">-Me頁面</router-link>
</p>
<router-view></router-view>
</div>
</template>
複製程式碼router.js中配置home的children路由
{path: '/home',
component: Home,
children: [
{path: 'about',component: About},
{path: 'me',component: Me}]
}
複製程式碼注意點:在Home.vue中一定要新增出口<router-view></router-view>否則不會生效
vue-router如何引數傳遞
1.用$route的params來動態傳參
- 通過
$route.name的形式來接受引數name這個引數 - 定義路由
path鍵值對的形式傳參
routes: [{
path: '/home/:name/:age/:height',
name: 'home',
component: Home
}]
複製程式碼在瀏覽器中輸入localhost:8080/#/home/name=james/age=26/height=180
- 在
App.vue中通過this.$route.params來動態取值
2.$route的query來動態傳參
$route.params僅能取到類似localhost:8080/#/home/name=james/age=26/height=180的地址傳過來的引數,如果是localhost:8080/#/home/name=james/age=26/height=180?sex=男 帶 ?,只能通過$route.query的方式來取值
性別{{this.$route.query.sex}}
複製程式碼上面兩種方式是為了區分路由動態傳遞的引數的性質來分割槽取值,我們還可以直接封裝方法,取值的時候不用這麼麻煩,可以通過props傳值
在router.js中
let fun = ({parms,query}=>{
return {
age:param.age,
sex:param.sex,
height:query.height,
}
})
// 通過props傳值
{path:'/home/:sex?height',name:'mine',component:Mine,props:fun}
複製程式碼// 定義接受的引數
props:['name','sex','height']
複製程式碼//直接取值
{{name}}
{{sex}}
{{height}}
複製程式碼三、導航守衛
1.什麼是路由守衛?
通過路由守衛可以重新整理或進入的路由介面進行許可權驗證,相當於Vue全域性的中介軟體
2.全域性守衛
任何一個路由進入都可以先攔截,然後根據新增跳轉不同的路由。
關鍵Code:
router.js中
const router = new VueRouter({.....})
router.beforeEach((to,from,next)=>{
if (to.path !== 'login') { //驗證是否登入
if(window.isLogin) {
next();
} else { //沒有登入
next('/login?redirect='+to.path);
}
} else { //不需要驗證
next();
}
next();
})
複製程式碼3.區域性守衛
只控制某單個元件的路由在routes陣列裡做控制,和全域性一樣需要beforeEach
4.生命週期
beforeRouteEnter進入之前呼叫beforeRouteUpdate路由引數變了beforeRouterLeave路由離開之前
四、路由懶載入
用的時候在載入,提高效能
1.懶載入的使用方法:
改變元件的引入方式:
由之前的
import About from './views/About'
複製程式碼轉變為
const About = ()=> import('./views/About')
複製程式碼這樣就輕鬆的實現了路由的懶載入啦!
相關API
-
this.$router.push(path): 相當於點選路由連結(可以返回到當前路由介面)
-
this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由介面)
-
this.$router.back(): 請求(返回)上一個記錄路由
-
this.$router.go(-1): 請求(返回)上一個記錄路由
-
this.$router.go(1): 請求下一個記錄路由
$router 和 $route的區別
- $router
router是VueRouter的一個物件，通過Vue.use(VueRouter)和VueRouter建構函式得到一個router的例項物件,這個物件中是一個全域性的物件，他包含了所有的路由包含了許多關鍵的物件和屬性
- $route
route是一個跳轉的路由物件，每一個路由都會有一個route物件，是一個區域性的物件可以獲取對應的name,path,params,query等
希望我的分享對你能有幫助,如何對你有所啟發,以程式設計師最高禮遇點贊?評論加轉發的方式來鼓勵我,你的肯定是我前進的最大動力!
掃一掃下面的二維碼,回覆學習即可免費領取最新前端學習資料,也希望在前端進階的路上,我們一起成長,一起進步!