vue-router

動態建立路由

使用vue-router

import VueRouter from 'vue-router'

Vue.use(VueRouter)

動態路由接收數據

$route.params

路由配置js：

{
  path: '/org/:id',
  
  component: function(resolve){

    require(['../views/org.vue'],resolve);

  }
}

頁面html：

<div class="box"> {{$route.params.id}}</div>

$route.query

路由配置js：

{
  path: '/org',
  
  component: function(resolve){

    require(['../views/org.vue'],resolve);

  }
}

頁面html：
發送頁：<router-link :to="{path:'/org',query:{num : 1}}">vue</router-link>

接收頁：<div class="box"> {{$route.query.num}}</div>

嵌套路由

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當 /user/:id/profile 匹配成功，
          // UserProfile 會被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

編程式的導航

router.push(location)

// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.replace(location)

跟 router.push 很像，惟一的不一樣就是
它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄。

router.go(n)

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 若是 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

操做 History

你也許注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 實際上它們確實是效仿 window.history API 的。

所以，若是你已經熟悉 Browser History APIs，那麼在 vue-router 中操做 history 就是超級簡單的。

還有值得說起的，vue-router 的導航方法 （push、 replace、 go） 在各種路由模式（history、 hash 和 abstract）下表現一致。

命名路由

有時候，經過一個名稱來標識一個路由顯得更方便一些，特別是在連接一個路由，或者是執行一些跳轉的時候。你能夠在建立 Router 實例的時候，在 routes 配置中給某個路由設置名稱。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
要連接到一個命名路由，能夠給 router-link 的 to 屬性傳一個對象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
這跟代碼調用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})
這兩種方式都會把路由導航到 /user/123 路徑。