石頭理解的vue-router（一）

vue-router 基礎

install

1. CDN
   <script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js></script>
2. NPM
   npm install vue-router
   安裝路由功能

   import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

做用，使用

1. 定義組件與路由的映射。
2. 定義渲染組件的位置。

$route & $router

this.$route // 路由記錄
this.$router // 路由實例

動態路由

用處： 在使用「動態路由參數」時會用到動態路由。
做用：

定義： router file

{
    path: '/user/:id',
    component: 'user'
}

注意： 動態路由的動態部分改變時原來的組件會被複用，這樣就不會觸發生命週期鉤子函數。若要觸發請使用watch $route或beforeRouteUpdate

使用： user file

this.$route.params.id

高級匹配模式

（待續）

優先級

越先定義優先級越高。

嵌套路由&命名視圖

router

{
    path: '/user',
    name: 'name', // 命名路由
    component: user,
    alias: '/roler', // 別名
    redirect: { name: 'foo' }, // 重定向
    props: true // 將 this.$route.params 設置爲組件屬性
}

命名路由

就是給路由起個名字。方便使用。

<router-link :to="{ name: 'user', params: { userId: 123 }}">user</router-link>

this.$router.push({ name: 'user', params: { userId: 123 }})

重定向、別名。

路由組件傳參

定義路由： router file

{
  path: 'routeUser/:userId',
  // components: {
  //   default: eleThree,
  //   second: eleSecond
  // },
  // props: {
  //   default: true,
  //   second: true
  // },
  component: routeUser,
  children: [
    {
      path: '/',
      components: {
        default: routeSecond,
        second: routeThree
      },
      props: {
        default: dynamicDate,
        second: true
      }
    }
  ],
  props: true
}

function dynamicDate (route) {
  console.log(route)
  const now = new Date()
  return {
    date: now.getFullYear()
  }
}

定義組件： routeUser file

<p>userId: {{userId}}</p>
<router-view></router-view>
<router-view name="second"></router-view>

props: ['userId']

1. 布爾模式	將 this.$route.params 設置爲組件屬性
2. 對象模式	按原樣設置爲組件屬性
3. 函數模式	方便作更多的操做

HTML5 History模式

（待續）

vue服務端渲染文檔

（待續）

---

2018.07.26 by stone