Vue從甜小白到皮大佬系列(七) Vue Router

閱讀時間預估:6分鐘

啥是Vue Router?

官方傳送門

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌,在咱們項目中也是必會技能之一。下面我想經過如下幾個方面來分享。

1、集成Vue Router

• 1.若是安裝了vue腳手架cli3 在create項目的時候會有安裝Vue router的選項,選中敲空格就會默認安裝Vue router

• 2.若是在create項目的時候沒有自動安裝,那麼要手動進行安裝.

npm i vue-router --save
複製代碼

• 3.安裝好vue-router後最好在src文件下建立一個router.js來專門管理整個項目的路由結構

2、使用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}}
複製代碼

3、導航守衛

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 路由離開以前

4、路由懶加載

用的時候在加載,提升性能

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等

但願個人分享對你能有幫助,如何對你有所啓發,以程序員最高禮遇點贊💓評論加轉發的方式來鼓勵我,你的確定是我前進的最大動力!

掃一掃下面的二維碼,回覆學習便可免費領取最新前端學習資料,也但願在前端進階的路上,咱們一塊兒成長,一塊兒進步!