路由实例的构造配置

路由实例的构造配置，指的是：构造配置 routes 中的每一个路由对象（路由规则、路由记录）。
var routerObj = new VueRouter({
  // 构造配置 
   routes:[
      // 路由规则 & 路由元信息
      {path:'/login',component:login},
      {path:'/register',component:register}			
   ]，
  // 其他配置
});
路由规则：routes 中的每个路由对象，被称为一个路由规则或路由记录；

路由元信息：定义路由规则的时候，可以配置相应的 meta 字段，即路由元信息。

routes，类型: Array<RouteConfig>，以下是 RouteConfig 类型（即，路由规则 & 路由元信息）的定义：
{
  path: string,  // 路由匹配
  component: Component,  // 组件
  name: string,   // 命名路由
  components: { [name: string]: Component },   // 命名视图
  redirect: string | Location | Function,    // 重定向
  alias: string | Array<string>,    // 别名
  children: Array<RouteConfig>,   // 嵌套路由
  beforeEnter: (to: Route, from: Route, next: Function) => void,
  meta: any
}

路由重定向

对于不识别的URL地址，常常使用重定向功能，将页面定向到首页显示。

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }  // 从 /a 重定向 /b
  ]
})

// 代码示例

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', redirect: "/foo"},
]

// 重定向的目标也可以是一个命名的路由

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

// 甚至是一个方法，动态返回重定向目标
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

默认子路由

如果要设置默认子路由，即点击 foo 时，自动触发 foo1，则需要进行如下修改：

将 router 配置对象中 children 属性的 path 属性设置为 ''，并将对应的 router-link 的 to 属性设置为 '/foo'。
// 路由导航
<router-link to="/foo">to Foo1</router-link>
<router-link to="/foo/foo2">to Foo2</router-link>
<router-link to="/foo/foo3">to Foo3</router-link>
// 视图渲染
<router-view></router-view>
const router = new VueRouter({
  routes: [
    { 
        path: '/', 
        component: Home 
    },
    { 
        path: '/foo', 
        component: Foo，
        children:[
            {path:'',component:Foo1},
            {path:'foo2',component:Foo2},
            {path:'foo3',component:Foo3},
          ]
    }
  ]
})

路由别名

路由别名，可以让我们自由的将 UI 结构映射为任意的 URL，而不受限于配置的嵌套的路由结构

const router = new VueRouter({
  routes: [
    { path: '/login', component: login, alias: '/denglu' }
  ]
})
<router-link to="/denglu">登录</router-link>

嵌套路由

路由记录是可以嵌套的（children），因此，当一个路由匹配成功后，它可能匹配多个路由记录。

在构造配置中，children 属性里的 path 属性只设置为当前路径，因为其会依据层级关系
而，在 router-link 的 to 属性，则需要设置为完全路径

实际应用中，界面通常由多层嵌套的组件组合而成。而，URL 中各段动态路径，也按某种结构对应嵌套的各层组件。

/user/bar                    
+------------------+                  
| User             |                 
| +--------------+ |                 
| | Bar          | |    
| |              | |                
| +--------------+ |                 
+------------------+

vue-router 中，使用构造配置中的嵌套路由，可以很简单的表达这种关系：

// app.vue
<template>
  <div id="app">
    <div>HelloWorld!</div>
    <router-link to="/foo">Foo</router-link>
    <router-link to="/bar">Bar</router-link>
    <router-view></router-view>    // /foo或/bar路由的出口
  </div>
</template>

// router.js
export default new Router({
  routes: [
    {
      path: '/bar',    
      component: Bar,
      // 当/bar/user 匹配成功，User组件会被渲染在Bar组件的<router-view>中
      children:[    // 嵌套路由
          {
            path:'user',    // 不需要设置根路径
            component: User
          }
      ]
    },
    {
      // 动态路由匹配，以 : 开头
      path: '/foo',
      component: Foo
    }
  ]
})

// Bar.vue
<template>
  <div class="content">
    Bar组件内容
    <router-view></router-view>   // 嵌套路由/bar/user的出口
  </div>
</template>