vue-router 基本知识点

vue-router就是将组件映射到路由，然后告诉vue-router在哪里渲染它们。

默认路由出口

<router-view></router-view>

使用router-link 组件来导航

通过传入 ‘to’ 属性指定链接

<router-link> 默认会被渲染成一个 `<a>` 标签

动态路由匹配

将某种模式匹配到所有的路由，全部映射到同一个组件。

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

/user/aa     /user/bb     /user/cc 都将映射到组件User

一个【路径参数】使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params,可以在每个组件内使用

你可以在一个路由中设置多段【路径参数】，对应的值都会设置到$route.params中。

/user/:username/post/:post_id    /user/evan/post/123    { username: 'evan', post_id: 123 }  this.$router.params

要注意，以/ 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

你会发现，children配置就是像routes配置一样的路由配置数组，你可以嵌套多层路由。

编程式导航

除了使用<router-link> 创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。

router.push(location)

想要导航到不同的URL,则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL.

当你点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link :to="...">等同于调用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'}});

router.replace(location)

跟router.push 很像，唯一的不同就是，它不会向history添加新纪录，而是跟它的方法名一样--替换掉当前的history记录。

router.go(n)

这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n).

还有值得提及的，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 路径。

 命名视图

有时候想同时展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar和main两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是

只有一个单独的出口。如果router-view没有设置名字，那么默认为default

<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>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：

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

重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

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

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

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

甚至是一个方法，动态返回重定向目标：

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

别名

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

上面对应的路由配置为：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

HTML5 History 模式

vie-router模式是hash模式--使用URL的hash来模拟一个完整的URL,于是当URL改变时，页面不会重新加载。

如果不想要很丑的hash，我们可以用路由的histroy模式，这种模式充分利用history.pushState API来完成URL跳转而无须重新加载页面

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

你应该在 Vue 应用里面覆盖所有的路由情况

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})