Vue-Router的routes配置詳解

更新時(shí)間：2021年10月25日 09:35:23 作者：性感的小肥貓

在使用vue-router的項(xiàng)目中,實(shí)例化VueRouter是其配置選項(xiàng)routes該選項(xiàng)指定路由與視圖的組件的關(guān)系或者路由與其他路由的關(guān)系，Router配置選項(xiàng)中是其中最重要的配置。本文就詳細(xì)的介紹一下

介紹

在使用vue-router的項(xiàng)目中,實(shí)例化VueRouter是其配置選項(xiàng)routes該選項(xiàng)指定路由與視圖的組件的關(guān)系或者路由與其他路由的關(guān)系，Router配置選項(xiàng)中是其中最重要的配置。

routes中對(duì)象屬性

interface RouteConfig = {
  path: string,
  component?: Component,
  name?: string, // 命名路由
  *components?: { [name: string]: Component }, // 命名視圖組件 https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
  alias?: string | Array<string>,
  children?: Array<RouteConfig>, // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void,
  *meta?: any,
  // 2.6.0+
  *caseSensitive?: boolean, // 匹配規(guī)則是否大小寫(xiě)敏感？(默認(rèn)值：false)
  *pathToRegexpOptions?: Object // 編譯正則的選項(xiàng)
}

path: string

指定當(dāng)前路由的路徑,當(dāng)瀏覽器url與path匹配時(shí)router-view就會(huì)渲染當(dāng)前route對(duì)象指定視圖組件component/components

const routes = [
    {
      path: '/',
      component: Home
    },
    {
      path:'/user',
      component: User
    }
  ]
  
  const router = new VueRouter({
    routes
  })

注意Vue的router支持動(dòng)態(tài)路徑,以 "/:屬性名"形式作為當(dāng)前path字符串中的一部分。這段字符串路由將作為動(dòng)態(tài)路由匹配真實(shí)url上響應(yīng)字符串信息

const routes = [
    {
      path: '/',
      component: Home
    },
    {
      path:'/user/:id/:local', // 動(dòng)態(tài)路徑 :id :local
      component: User
    }
]
  
const router = new VueRouter({
    routes,
})
// 路由跳轉(zhuǎn)

<div id="app">
    <router-view  />
    // 下面這些鏈接都會(huì)與/user/:id/:local匹配 
    <router-link  to="/user/007/lk">用戶007</router-link>
    <router-link  to="/user/111/js">用戶111</router-link>
    <router-link  to="/user/10086/yk">用戶10086</router-link>
    <router-link  to="/user/241247/la">用戶241247</router-link>
</div>
/* 當(dāng)我們跳轉(zhuǎn)至上面的路由時(shí)其對(duì)應(yīng)的路由視圖組件User內(nèi)部就可以通過(guò)
this.$route.params 獲取到動(dòng)態(tài)路徑匹配到的信息 
例子: url /user/007/lk   this.$route.params -> {id:'007',local:'lk'}
      url /user/10086/yk  this.$route.params -> {id:'10086',local:'yk'}
*/

注意this.$route就是當(dāng)前vue應(yīng)用程序所在路由的信息對(duì)象

// http://localhost:8080/#/user/10086/cc?wd=iPhone&aa=test
{
    name: undefined, // 當(dāng)前路由名
    *fullPath: "/user/10086/cc" // 當(dāng)前url完整路徑
    *hash: "" // 當(dāng)前路由的哈希
    *matched: [{…}] 
    *meta: {}
    params: {id: "10086", local: "cc"} // 動(dòng)態(tài)路徑匹配到鍵值對(duì)對(duì)象
    *path: "/user/10086/cc" // 當(dāng)前url匹配到的路徑
    query: { // url的query字符串網(wǎng)址?后面的參數(shù)解析出來(lái)的對(duì)象
        wd: "iPhone",
        aa: "test"
    } 
}

component : Component | () => import(組件)

當(dāng)前瀏覽器url與路由的path匹配時(shí)所渲染的路由組件

import Vue from 'vue'
import HotMusicList from '../views/HotMusicList'

const routes = [
  {
    path: '/hot',
    component: HotMusicList
  },
  {
    // 動(dòng)態(tài)路徑匹配 通過(guò):id獲取每一首歌不同的id
    path: '/music/:id',
    // 路由的懶加載,通過(guò)函數(shù)的形式,可以讓項(xiàng)目中哪些不許一開(kāi)始就要加載的組件,加載到項(xiàng)目中去
    // 只有瀏覽器跳轉(zhuǎn)到當(dāng)前路由時(shí),該路由組件才會(huì)加載到項(xiàng)目中去
    // 這樣做的好處是減少不必要的加載降低應(yīng)用加載速度和運(yùn)行帶寬
    component: () => import('../views/MusicPlay') 
  }
]

注意在項(xiàng)目開(kāi)發(fā)中應(yīng)用中不需要一開(kāi)始就加載的路由組件請(qǐng)使用懶加載

name: string

給路由命名,讓路由成為具名路由。路由的導(dǎo)航就可以使用name進(jìn)行跳轉(zhuǎn)。（路由使用location導(dǎo)航時(shí)只有具名路由可可以直接接受pramas傳參）

const routes = [
  {
    path: '/user', 
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

redirect： string | Location | Function

重定向路由，當(dāng)前應(yīng)用訪問(wèn)導(dǎo)航至該路由時(shí)，這個(gè)路由會(huì)（以替換的形式）自動(dòng)重定向到redirect指定的新路由

const routes = [
  {
    path: '/contact',
    component: ContactView
  },
  {
    path: '/user/:id', 
    name: 'User',
    component: () => import('../views/User.vue')
  },
  {
    path: '/oldpath1',
    redirect: '/contact'
  },
  {
    path: '/oldpath2',
    redirect: { name: 'User', params: { name: '小明', age: 19 } }
  },
  /*
      redirect 支持函數(shù)的形式,該函數(shù)接收一個(gè)參數(shù)就是個(gè)訪問(wèn)oldpath時(shí)生成的location對(duì)象
      redirect 函數(shù)的形式必須返回重定向路由的path或location
  */
  {
    path: '/oldpath2',
    redirect:(oldpathLocation) => '/contact'
  }
  {
    path: '/oldpath4',
    redirect:(oldpathLocation) => { name: 'User', params: { name: '小明', age: 19 } }
  }
]

props: boolean | Object | Function

路由的動(dòng)態(tài)匹配一般情況下只能通過(guò),this.$route.params獲取動(dòng)態(tài)匹配到的值。當(dāng)設(shè)置props屬性后動(dòng)態(tài)匹配到的鍵值對(duì)可以作為組件props直接傳遞給視圖組件，這樣大大降低組件的耦合性

布爾值.如果 props 被設(shè)置為 true，route.params 所有鍵值對(duì)將會(huì)被設(shè)置為組件props屬性。

const routes = [
  {
    path: '/hot',
    component: HotMusicList
  },
  {
    // 動(dòng)態(tài)路徑匹配 通過(guò):id獲取每一首歌不同的id
    path: '/music/:id',
    // 路由的懶加載
    component: () => import('../views/MusicPlay'), 
    props: true
  }
]
// 組件內(nèi)部 就可通過(guò)props的id 訪問(wèn)到this.$route.id
<template>
  <div>
      歌曲播放
      <audio controls :src="musicUrl"/>
  </div>
</template>

<script>

export default {
  props: ['id'], // 路由動(dòng)態(tài)路徑匹配到的鍵值對(duì)會(huì)自動(dòng)傳遞給當(dāng)前組件的同名props
  data() {
      return {
          musicUrl: ''
      }
  },
  created() {
    fetch(`/song/url?id=${this.id}`)
      .then((res) => res.json())
      .then(({ data }) => {
          //真實(shí)開(kāi)發(fā)中這里要判斷數(shù)據(jù)是否請(qǐng)求成功
        console.log(data[0]);
          // 把歌曲的數(shù)據(jù)賦值給data
        this.musicUrl = data[0]?.url
      });
  },
};
</script>

對(duì)象props對(duì)象形式,就是將對(duì)象key作為渲染組件props屬性名,value就是對(duì)應(yīng)屬性值 (這種寫(xiě)法value不會(huì)改變所以傳遞props都是一些靜態(tài)屬性)

{
    path: '/home/:id',
    name: 'Home',
    props: {
        a: 1,
        b: false
    },
    component: Home
}

函數(shù)props的函數(shù)寫(xiě)法接收當(dāng)前路由信息對(duì)象作為參數(shù),該函數(shù)會(huì)返回一個(gè)對(duì)象.對(duì)象的key就是渲染組件props屬性名,value就是對(duì)應(yīng)屬性值

{
    path: '/home/:id',
    name: 'Home',
    props: (route) => ({
        a: route.query.wd, //將路由query.wd傳遞給組件Home的a props
        b: route.params.id //將路由params.id傳遞給組件Home的b props
    }),
    component: Home
}

alias: string| Array[string]

路由的別名,可以給一個(gè)路由設(shè)置多個(gè)路徑。當(dāng)訪問(wèn)這些別名路徑時(shí)都會(huì)訪問(wèn)同一個(gè)路由組件

const routes = [
  {
    path: '/hot',
    component: HotMusicList,
    alias: ['/list','/rank','recommend']
  }
]

children?: Array[RouteConfig]

嵌套路由，可以給當(dāng)前路由設(shè)置二級(jí)路由

[
    {
    path: '/home',
    component: Home,
    children: [
      {
        path: '/home/follow',
        component: () => import('../views/home/Follow')
      },
      {
        path: 'recommend', //路由前不加/相對(duì)路徑等價(jià)于 "/home/recommed"
        component: () => import('../views/home/Recommend')
      }
    ]
    }
]

beforeEnter: (to: Route, from: Route, next: Function) => void

路由的獨(dú)享守衛(wèi),當(dāng)應(yīng)用將要導(dǎo)航到當(dāng)前路由時(shí),可以使用該守衛(wèi)進(jìn)行一些邏輯運(yùn)算實(shí)現(xiàn)是否阻止本次導(dǎo)航

Router的實(shí)例方法

概念將VueRouter實(shí)例對(duì)象配置到Vue中后, vue實(shí)例就會(huì)擁有一個(gè)this.$router屬性,this.$router就是當(dāng)前VueRouter的實(shí)例對(duì)象。他提供了所有編程式導(dǎo)航的API。
注意router是路由實(shí)例對(duì)象里面包含著路由的屬性方法,router是路由實(shí)例對(duì)象里面包含著路由的屬性方法, router是路由實(shí)例對(duì)象里面包含著路由的屬性方法,route是當(dāng)前瀏覽訪問(wèn)url路由信心對(duì)象

*VueRouter實(shí)例屬性

app 配置了當(dāng)前router 的 Vue 根實(shí)例
mode 當(dāng)前Router使用的模式 "hash" | "history"
currentRoute 當(dāng)前路由對(duì)應(yīng)的route信息對(duì)象

VueRouter實(shí)例方法

router.push(string | location)

編程式導(dǎo)航到指定的路由

<template>
  <div>
    <h3>主頁(yè)</h3>
    <div class="tab">
      <router-link to="/home/follow">關(guān)注</router-link>|
      <button @click="gotoRecommend">推薦</button>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    gotoRecommend() {
      //   this.$router.push("/home/recommend");
      this.$router.push({path:"/home/recommend", query:{wd:1,offset:0}})
    },
  },
};
</script>

router.replace(string | location)

編程式替換當(dāng)前路由導(dǎo)航到新路由

<template>
  <div>
    <h3>主頁(yè)</h3>
    <div class="tab">
      <router-link to="/home/follow">關(guān)注</router-link>|
      <button @click="gotoRecommend">推薦</button>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    gotoRecommend() {
      //   this.$router.replace("/home/recommend");
      this.$router.replace({path:"/home/recommend", query:{wd:1,offset:0}})
    },
  },
};
</script>

router.go(Int number)

編程式從當(dāng)前路由history棧的位置前進(jìn)后退number條

this.$router.go(3)   // 從當(dāng)前路由history棧的位置前進(jìn)3條
this.$router.go(-1) // 從當(dāng)前路由history棧的位置后退1條
this.$router.go(0)  // 強(qiáng)制刷新頁(yè)面

注意當(dāng)前進(jìn)/后退的number大于實(shí)例路由history棧的長(zhǎng)度時(shí),會(huì)前進(jìn)到最后一條或后退到第一條,但是不推薦這樣做會(huì)引起性能問(wèn)題造成頁(yè)面卡頓

router.back()

編程式從當(dāng)前路由history棧的位置后退1條

this.$router.back() // 等價(jià)于this.$router.go(-1)

router.forward()

編程式從當(dāng)前路由history棧的位置前進(jìn)1條

this.$router.forward() // 等價(jià)于this.$router.go(1)

路由懶加載

用vue.js寫(xiě)單頁(yè)面應(yīng)用時(shí)，會(huì)出現(xiàn)打包后的JavaScript包非常大，影響頁(yè)面加載，我們可以利用路由的懶加載去優(yōu)化這個(gè)問(wèn)題，當(dāng)我們用到某個(gè)路由后，才去加載對(duì)應(yīng)的組件，這樣就會(huì)更加高效

沒(méi)有使用懶加載

先引入了組件，事先加載好了。然后不管有沒(méi)有使用都已經(jīng)存在

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
]

const router = new VueRouter({
  routes
})

export default router

使用懶加載

只有路由被使用到了才進(jìn)行加載對(duì)應(yīng)的組件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/mock',
    name: 'Mock',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Mock.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

history模式和hash模式

vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。
如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。

history模式

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上(方法可在Router的實(shí)例方法中查看)，它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時(shí)，雖然改變了當(dāng)前的 URL，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。

手動(dòng)設(shè)置

效果

hash模式

hash —— 即地址欄 URL 中的 # 符號(hào)（此 hash 不是密碼學(xué)里的散列運(yùn)算）。比如這個(gè) URL：http://localhost:8081/#/form hash 的值為 #/form。它的特點(diǎn)在于：hash 雖然出現(xiàn)在 URL 中，但不會(huì)被包括在 HTTP 請(qǐng)求中，對(duì)后端完全沒(méi)有影響，因此改變 hash 不會(huì)重新加載頁(yè)面。

路由守衛(wèi)

全局路由守衛(wèi)

router.beforeEach 前置守衛(wèi)
*router.beforeResolve 前置守衛(wèi)
*router.afterEach 后置守衛(wèi)

情況一

在使用vue-router開(kāi)發(fā)的項(xiàng)目中,一般情況下不同路由之間的切換會(huì)將離開(kāi)的路由組件卸載,進(jìn)入的路由組件掛載。
這種情況下我們可通過(guò)vue的聲明周期進(jìn)行一些頁(yè)面的邏輯操作。但是如果有些情況下應(yīng)用為提高用戶體驗(yàn)減少卸載頻率或者保存離開(kāi)組件的活躍性，使用keep-alive組件包裹router-view后路由的切換就把會(huì)卸載離開(kāi)的組件了。這時(shí)，如果你的組件需要在路由進(jìn)入或離開(kāi)時(shí)進(jìn)行一些操作修改組件自身的數(shù)據(jù)DOM編程等，就不能再依靠vue的生命周期了。這種情況下請(qǐng)使用組件內(nèi)的路由守衛(wèi)。

beforeRouteEnter 路由組件將要進(jìn)入
beforeRouteUpdate (2.2 新增) 路由組件將要更新 -> /music/10086 /music/10010
beforeRouteLeave 路由組件將要離開(kāi)

export default {
  props: ['id'],
  data() {
      return {
          musicUrl: ''
      }
  },

  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
    console.log(undefined)
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問(wèn)組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問(wèn)組件實(shí)例 `this`
  }
}

注意組件獨(dú)享的路由守衛(wèi)方法都包含三個(gè)參數(shù) to from next

to : location 本次路由導(dǎo)航跳轉(zhuǎn)的目標(biāo)路由信息對(duì)象
from : location 本次路由導(dǎo)航從哪個(gè)路由信息對(duì)象跳轉(zhuǎn)而來(lái)()
next : function 該方法是否允許本次路由跳轉(zhuǎn)

next()  // 允許路由跳轉(zhuǎn) 
next(true) // 允許路由跳轉(zhuǎn)
next(false) // 不允許路由跳轉(zhuǎn)
next('/') / next({ path: '/' }) // 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對(duì)象，且允許設(shè)置諸如 replace: true、name: 'home' 之類(lèi)的選項(xiàng)。
// 注意 只有beforeRouteEnter 的next方法可以接受一個(gè)回調(diào)函數(shù),
// 該回調(diào)函數(shù)接收當(dāng)前路由組件實(shí)例對(duì)象作為參數(shù),我們可以通過(guò)該參數(shù)操作當(dāng)前組件
beforeRouteEnter(to, from, next) {
    console.log(to , from)
    console.log('組件將要進(jìn)入,這是組件實(shí)例還不存在',this)
    next(vm => {
      fetch(`/song/url?id=${vm.id}`)
      .then((res) => res.json())
      .then(({ data }) => {
          //真實(shí)開(kāi)發(fā)中這里要判斷數(shù)據(jù)是否請(qǐng)求成功
        console.log(data[0]);
          // 把歌曲的數(shù)據(jù)賦值給data
        vm.musicUrl = data[0]?.url
      });
    }) // 允許路由跳轉(zhuǎn)
}

情況二

在使用vue-router開(kāi)發(fā)的項(xiàng)目中,一般情況下不同路由之間的切換會(huì)將離開(kāi)的路由組件卸載,進(jìn)入的路由組件掛載。
這種情況下我們可通過(guò)vue的聲明周期進(jìn)行一些頁(yè)面的邏輯操作。但是如果有些情況下應(yīng)用為提高用戶體驗(yàn)減少卸載頻率或者保存離開(kāi)組件的活躍性，使用keep-alive組件包裹router-view后路由的切換就吧會(huì)卸載離開(kāi)的組件了這時(shí)，如果你的組件需要在路由進(jìn)入或離開(kāi)時(shí)進(jìn)行一些操作不需要修改組件自身的狀態(tài)只是判斷是否允許本次路由的跳轉(zhuǎn)等。這種情況下請(qǐng)使用路由獨(dú)享守衛(wèi)。

beforeEnter(to, from, next) 當(dāng)路由將要導(dǎo)航至當(dāng)前路由時(shí)觸發(fā)
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

案例登錄驗(yàn)證路由獨(dú)享守衛(wèi)配置

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/discover',
        component: () => import('../views/Discover')
    },
    {
        path: '/mine',
        component: () => import('../views/Mine'),
        //路由獨(dú)享守衛(wèi)
        beforeEnter(to, from, next) {
            // 因?yàn)檫@個(gè)守衛(wèi)沒(méi)有任何DOM操作或者對(duì)組件自身狀態(tài)進(jìn)行讀寫(xiě)
            // 這樣的守衛(wèi)就可以作為路由獨(dú)享守衛(wèi)
            // 正確的做法存在cookie storage中
            if (localStorage.getItem("user")) {
              next();
            } else {
              // 這里嗎沒(méi)有this, next接收一個(gè)回調(diào)函數(shù),在回調(diào)函數(shù)中跳轉(zhuǎn)
              // 下面的寫(xiě)法進(jìn)入了個(gè)人頁(yè)面,又從個(gè)人頁(yè)面重定向到登錄,這樣可能會(huì)造成一些不必要的bug
              //   next((vm) => {
              //   vm.$router.replace('/landr')
              //   });
              next({name:'login',params:{to}}); //阻止本次跳轉(zhuǎn),直接導(dǎo)航到指定路由
            }
          }
    },
    {
        path: '/landr', // login an register
        component: () => import('../views/loginanregister/LoginAndRegister'),
        children: [
            {
                name:'login',
                path: 'login',
                component: () => import('../views/loginanregister/Login')
            },
            {
                path: 'register',
                component: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

情況三

全局路由守衛(wèi),當(dāng)應(yīng)用中有多個(gè)路由都需要進(jìn)行相同邏輯的路由守衛(wèi)判斷時(shí),并且該邏輯操作中不需要直接操作組件DOM或組件組件的狀態(tài)這是就可以使用全局路由守衛(wèi)(全局守衛(wèi)最常見(jiàn)的應(yīng)用就是登陸驗(yàn)證)
beforeEach(to,from,next) 全局前置守衛(wèi)

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'

Vue.use(Router)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/discover',
        name: 'Discover',
        component: () => import('../views/Discover')
    },
    {
        path: '/mine',
        name: 'Mine',
        component: () => import('../views/Mine'),
    },
    {
        path: '/landr', // login an register
        component: () => import('../views/loginanregister/LoginAndRegister'),
        children: [
            {
                name: 'login',
                path: 'login',
                component: () => import('../views/loginanregister/Login')
            },
            {
                path: 'register',
                component: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

const router = new Router({
    routes,
    linkExactActiveClass: 'active'
})
// 路由的全局守衛(wèi)所有的路由跳轉(zhuǎn),都會(huì)調(diào)用該守衛(wèi)
// 全局路由守衛(wèi)也是Vue router應(yīng)用中,最適合做登錄驗(yàn)證的地方
router.beforeEach((to, from, next) => {

    if(to.name === "Mine" || to.name === "Discover") {
        // 因?yàn)檫@個(gè)守衛(wèi)沒(méi)有任何DOM操作或者對(duì)組件自身狀態(tài)進(jìn)行讀寫(xiě)
        // 這樣的守衛(wèi)就可以作為路由獨(dú)享守衛(wèi)
        // 正確的做法存在cookie storage中
        if (localStorage.getItem("user")) {
            next();
        } else {
            // 這里嗎沒(méi)有this, next接收一個(gè)回調(diào)函數(shù),在回調(diào)函數(shù)中跳轉(zhuǎn)
            // 下面的寫(xiě)法進(jìn)入了個(gè)人頁(yè)面,又從個(gè)人頁(yè)面重定向到登錄,這樣可能會(huì)造成一些不必要的bug
            //   next((vm) => {
            //   vm.$router.replace('/landr')
            //   });
            next({ name: 'login', params: { to } }); //阻止本次跳轉(zhuǎn),直接導(dǎo)航到指定路由
        }
    }else {
        next()
    }

})

export default router

router.beforeResolve(to,from,next) 全局前置守衛(wèi),在beforeEach觸發(fā)之后
router.afterEach(to, from) 全局后置守衛(wèi),該守衛(wèi)路由已經(jīng)離開(kāi)時(shí)觸發(fā),該守衛(wèi)沒(méi)有next, next 函數(shù)也不會(huì)改變導(dǎo)航本身

到此這篇關(guān)于Vue-Router的routes配置詳解的文章就介紹到這了,更多相關(guān)Vue-Router routes配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: