1.name

可以用name實(shí)現(xiàn)跳轉(zhuǎn)

image.png

<router-link :to="{name:'app'}">Go to Foo</router-link>

2.meta

用來(lái)保存路由里面的信息，寫(xiě)html的時(shí)候會(huì)寫(xiě)一些meta，里面提供頁(yè)面有關(guān)的元信息（meta-information）。

3.children

嵌套路由，路由下面可以放子路由。

image.png

test是在/app路徑下面放的children，所以<router-view></router-view>應(yīng)該放在Todo組件所在的頁(yè)面里面。

4.transition

過(guò)渡動(dòng)畫(huà)，可以包裹在路由外面，可以作用在路由的切換。

image.png

image.png

5.路由傳參

image.png

image.png

image.png

this.$route打印出來(lái)就是以下信息

image.png

6.props

• 在聲明路由的地方，加props

  
  
  image.png

聲明id的props

image.png

this.id 打印出來(lái)如下

image.png

還可以指定id

image.png

image.png

還可以根據(jù)query進(jìn)行傳遞
url后面接參數(shù)
？a=123&b=456
這種形式就是query

image.png

image.png

注意：盡量讓組件和路由解耦，盡量不要在組件里面去使用$route，這樣組件的復(fù)用性會(huì)更高。

7.命名視圖

同一個(gè)頁(yè)面多個(gè)<router-view>時(shí)

image.png

有多個(gè)視圖的時(shí)候，要把component改成components

image.png