该篇涉及到 children，redirect，props，及动态跳转

嵌套路线之children属性

const RouterView = {
  render: (h)=>(h('router-view'))
}
const User = {
  template: `<div>
    这是User页面组件
  </div>`
}

const Article = {
  template: `<div>
    这是Article页面组件
  </div>`
}

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: RouterView,
    redirect: '/home/user'
    children: [
      {path: 'user', name: 'User', component: User},
      {path: 'article', name: 'Article', component: Article}
    ]
  }
]

const router = new VueRouter({
  routes
})

注意，如果要在一个路线内嵌套路线（并且表现为路线内的路线切换），children的path不能带有 / 开头，以它开头的路线就表示相对顶级根路线，在这种情况下
渲染子路线由必须先渲染父路线组件，且父组件必须渲染 router-view 不然无法挂载子路线组件

重定向之redirect

{
  redirect: String  | Function | Object  //(路由信息，可带参数)
}

//Object 例子
{
  name: 'someComponent' | path: 'url' //(选择一个)
  // 注意 name 和 path 是只有一个可以被匹配，重定向无法传参通过有params和query模式
}

//Function的例子
 const redirectFunction = (to) => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
}}

props

{
  props: Boolean  | Function | Object
}

• 如果 props 被设置为 true，route.params 将会被设置为组件属性
• 如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
• 你可以创建一个函数返回 props

// 对象示例
{
  props: { newsletterPopup: false }
}
//注意这个props 你可以想象成 <router-view v-bind="props"> </router-view>
// 也许这样你可能瞬间就对模糊的概念清晰了 props就是传入组件的属性值对象，即使是params和query也是这样



//函数示例
{ 
  props: (route) => ({ q: route.query.q }) //返回一个 props对象如上一条
}

动态跳转

大家可以看到，我区分什么是路线 route/routes，什么是路由 router，路由相当于一个遥控器一样，而路线是执行不同的功能，路由可以控制路线就像遥控器可以控制功能播放那个频道的电视一样

// 怎么用代码形式控制路由切换呢
router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()

router.push({
  name: '',
  query:{},
  params: {}
})

标签式的动态匹配

附录

上一篇：Vue-Router 路线匹配
下一篇：