vue-router -- 基本配置

基础的完整sample（戳这里）

对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

编程式的vue-router操作：

1. router.push(location)
2. router.replace(location)
3. router.go(n)

命名路由 在routes数组配置中添加name键值对，

// 参数配置
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
// 链接到该路由的方法
// 1.<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 2.router.push({ name: 'user', params: { userId: 123 }})

命名视图 同时（同级）展示多个视图时候，如sidebar header main ……，我们需要同级路由，请注意下面是components（不是component）参数

// template 定义
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

// routes参数定义
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向 _redirect_参数在routes配置中可接受为字符串、命名对象、“to”函数，详情请戳这里

别名 _alias_更像是说假路由，URL变成了alias配置的值，但是视图还是path对应的component

mode 两种模式： _hash _和 history