vue-router基本用法

組件切換

就我的目前所知，Vue中切換組件有兩種方式：

動態組件(:is屬性綁定)

<component v-bind:is="currentTabComponent"></component>

查看官網介紹

查看官網示例

注意：

• 使用component:is的組件必須是局部註冊 | 全局註冊 | 組件初始對象。

驚喜：

• 該方法與keep-alive更配喲，切換到另外一組件時，能夠保存當前組件狀態。

keep-alive官方說明

keep-alive要注意，切換回來的時候，不會再觸發created、mounted生命週期

路由跳轉(Routes)

詳見下述...

路由跳轉(Routes)

1. 路由配置（一切的前提）

若是經過vue-cli腳手架初始化的項目，會在src/router/目錄下有一個已建立好的路由配置：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

這裏有兩個概念，也是在程序中路由使用常常碰到的實例對象this.$router、this.$route：

this.$router：

能夠簡單的理解爲new Router建立的路由實例，包含了全部路由(route)的配置信息。

this.$route：

能夠簡單的理解爲routes中的當前所在路由的全部配置信息，如path、params、query、name...

---

指定路由切換的方式有兩種，二選一便可：

2. 聲明式路由切換(HTML)

• 直接經過to屬性綁定字符串路徑:

<router-link to="/path"></router-link>

或

• 經過:to動態綁定route對象:

<router-link :to="{
  path:'/path'
}"></router-link>

注意：

• 若route對象中配置了params屬性，則目標跳轉路徑不能經過path指定，而要經過路由配置中的name指定，示例:to="{name:'HelloWorld',params:{id:'1234'}}"。

不爽之處：

• 經過router-link方法切換路由，若是想在該連接上綁定其它事件，不能直接經過@click，而須要@click.native。

---

2. 命令式路由切換(JS)

在程序中進行路由跳轉的方式和HTML中差很少，只須要在須要跳轉的位置，使用this.$router.push('/path')或

this.$router.push({
  path:'/path'
})

便可。

禁止路由跳轉

組件比較挑食，在某些狀況下，我是禁止進入你進入個人家門的，怎麼禁止呢？

beforeRouteEnter(to,from,next){
  if(...){
    ...
    next(false); //不準進；
  }
}

路由生命週期注意項

component:is

經過該方法進行組件切換的，不是Url的變更，不會觸發路由生命週期；

動態路由

'/user/:id'動態路徑參數的變更，不會觸發beforeRouteEnter生命週期，能夠經過beforeRouteUpdate來監聽變化。

其它

路由模式

Hash模式

Hash模式是指路由配置中的path不是進行頁面的跳轉，而是經過#鏈接的，框架內部處理的組件切換。

URL的井號(做者： 阮一峯)

History模式

History模式，沒有#，URL顯示與正常的URL同樣，須要後臺配合一些配置項（我的沒怎麼用過(^_^)）。