vue-router

匹配优先级按路由定义顺序

路由导航

• router.push(location, onComplete?, onAbort?)
  想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
• 当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(...)。

声明式	编程式
	router.push(...)

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

动态路由

• 如每个ID对应的页面都是user页面，则可使用动态路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/core/pages/home'
Vue.use(Router)
var person = {
  template: '
Person
'
}
export default new Router({
  routes: [
    {
      path: '/person/:id', component: person
    },
  ]
})

$route.params

• 当使用冒号 : 标记时，参数值会被设置到 this.$route.params，可以在每个组件内使用。如下输出当前用户的 ID：

var person = {
  template: '
Person  {{ $route.params.id }} 
'
}

模式	路径	$route.params
/person/:name	/person/test	{ name: 'test' }
/person/:name/:age	/person/test/20	{ name: 'test', age: 20 }

$route.path

• 类型: string
  字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

$route.query

• 类型: Object
  一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

嵌套路由

export default new Router({
  routes: [
    {
      path: '',
      meta: {title: '首页', auth: '首页'},
      component: Home,
      children: [
        {
          path: '/',
          name: 'Home',
          component: Home
        },
        {
          path: '/home',
          name: 'Home',
          component: Home
        },
      ]
    }
  ]
})

此时访问 http://localhost:8080/#/home 和 http://localhost:8080/#/所展示的页面相同