Vue路由採坑記

Cris_冷崢子發表於2018-01-29
Vue路由

[TOC]

容易疏忽的點

註冊要註冊到根例項上

[danger] router為關鍵字屬性，非自定義

import from router from '../router'
new Vue({
	router
})
複製程式碼

一個元件的頂層只能有一個元素

<template>
	<div></div>
</template>
複製程式碼

如何顯示預設路由？如何在有子路由的時候切換路由後顯示預設子路由？

答1：將預設路由的router-link的to和路由註冊時的path都設定為''

答2:

  • 將預設路由的path設定為'',''表示當前，即路由切換時不帶子路徑時候的path
  • 將預設路由的<router-link> 的 to屬性設定為父元件的path

[warning] 注意: children 中的子路由正常來說應為相對路徑，但也可設定為絕對路徑，這並不影響子路由元件元件的顯示，但url路徑上會有所區別。

預設路由的啟用樣式一直處於啟用態，何解？

答：在預設路由的router-link上設定exact精確樣式匹配屬性。

如何進行路由跳轉?路由跳轉有幾種方式?

,{
      //對未匹配的路徑進行跳轉
      /**
       * 跳轉方式一：不會改變url
       */
      path:'*'
      // ,component:notfound

      /**
       * 跳轉方式二:會改變url
       */
      // ,redirect:'/home' //手動對path進行修改後跳轉
      // ,redirect:{path:'/home'}  //物件形式修改，支援變數
      // ,redirect:{name:'about'} //name為註冊路由時對應路由所取的名字，為上面的快捷用法
      
      ,redirect:(to)=>{ //動態設定重定向的目標
        if(to.path === '/fwf'){
          return '/home'
        }else if(to.path === '/xvw'){
          return {path:'/document'}
        }else{
          return {name:'about'}
        }
        // console.log(to); //to為目標路由的物件
        // return '/home';
      }
}
複製程式碼

name是什麼？有什麼用？

註冊時該條路由取的名字

第一種情況，name為路由註冊時所取的名字

重定向

在重定向的時候直接用name 代表 path 進行跳轉，是一種快捷語法。

redirect:{name:'about'} //name為註冊路由時對應路由所取的名字，為上面的快捷用法
複製程式碼

linkTo

在router-link上也可使用註冊路由時路由所取的name對href進行設定，點選link時會自動跳轉到該name路由的path

<router-link :to="{name:'about'}" tag="li">work</router-link>
複製程式碼

一路多圖

第二種用法是一個路由對應多個檢視時對除了路由預設檢視的檢視進行標註，以便引入對應的路由。在路由切換時，一個路由可以對應多個檢視router-view，這時候我們就需要區分不同的 router-view ，所以就需要取個名字。

<router-view name="addV"></router-view>
<router-view></router-view>
//-----------------------------------------------------
 ,{
  path: '/document',
  name: 'Document',
  // component:
  components:{ //一個路由對應多個檢視
    default:main, //default為關鍵字 ,沒有取名的路由檢視，必須的。main為引入的元件名
    addV:other //addV為附加的router-view上取的名字,other為引入的元件所取的名字
  }
}
複製程式碼

如何更改預設link的標籤型別?

行內修改法

直接在ink標籤上利用tag屬性進行修改

<router-link :to="index" exact tag="li" class="class1" event="mouseover">
複製程式碼

如何更改預設啟用樣式的類名?

行內修改法

直接在link標籤上利用active-class進行修改

<router-link to="/about" active-class="diy">about</router-link>
複製程式碼

[info] 未完待續...

相關文章