(四) Vue 相關的路由配置（及子路由配置）

 (四) Vue 相關的路由配置（及子路由配置）

路由跳轉的幾種方式(四.2) https://www.cnblogs.com/tcz1018/p/13092500.html

1. 首先明確一點  在書寫之前盡量保持相關的文件知道含義 比如 components 啥的 知道是要放什么東西

這里把路由的文章提前了 ，是覺得到這里應該對項目有一些整體的理解， 所以才提前可能有的人立即路由的概念 ， 其實你在寫原聲的時候跳轉頁面用的是<a>標簽 ，但是在實際上比較亂 ，不方便 ，所以使用路由整個提出來， 進行規划， 方便使用

在src里面創建相應的文件夾進行存放  

2.路由配置
          首先在頁面打開時候都是進入的 APP.vue (PS 我是初學 是這么理解的 有錯請見諒) 這是最大的應該 

​

意思就是說 在顯示里面都是直接從這走的  要想顯示其他的就去路由重定向 我想顯示我的登錄頁面 就會去路由里面改了

 

配置路由

​

注釋里面寫的比較明白  就是直接在聲明好路徑之后  直接修改目錄文件  重定向直接路由
顯示自己相應的頁面

子路由配置：

   我是看的這個文章  感覺比較好
https://www.cnblogs.com/vickylinj/p/10900349.html

   其實在寫的時候 着重理解一下  然后在注意理解細節  流程  就可以了  不難

​

在index 就是顯示的vue文件里面是這么寫的

​

在頁面里面主動跳轉頁面 要用<router-link></router-link>  注：在上寫的那個網址里面 他還寫了一個屬性就是 Tag="li"其實就是 有li 的特性  前面加了個小黑點

​

 注：路由的寫法有兩種（不要見了覺得不一樣   就是可以直接在下邊的{}里面直接指向，然后寫路徑 。也可以在頂部直接寫上import 在下邊的{}直接使用）
   舉例說明：第一種
​
   舉例說明：第二種
​
​

路由導航衛士：

    作用： 就是在你的項目進行路由跳轉的時候 進行一些相應的判斷，比如判斷時候有token

根據官方文檔就能看出來相應的操作，這里不說的太多只是判斷是否為登陸過   是否過期就要用攔截器  或者你自己在請求的位置寫個判斷來進行判斷

/ 全局前置守衛
  router.beforeEach((to,from,next)=>{
    let token = localStorage.getItem("token")//驗證登錄狀態
    if(token){//判斷是否登錄
      next()
    }
    else{
      if(to.path!=='/login'){
        alert("請先登錄")
        next({path:'/login'})
      }
      else{
        next()
      }
    }
  })

 

還有其他幾種相應的路由守衛，在不同的條件下進行相應的判斷操作。

404的的頁面 

　　　在找不到頁面的狀態下自動跳到404頁面