1. 路由组件传参
页面组件可以通过props接收url参数
布尔模式
{
path: '/argu/:name',name: 'argu',component: () => import('@/views/argu.vue'),props: true}
对象模式
{
path: '/about',name: 'about',component: () => import('@/views/About.vue'),props: { food: 'banana'}}
函数模式
{
path: '/search',component: SearchUser,props: (route) => ({ query: route.query.q })}
2. HTML5 History模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,例: loccalhost:8080/#/,#就是hash模式
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
或者
在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }]
})
3. 导航守卫
1.导航被触发。
2.在失活的组件里调用离开守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
4. 路由元信息
定义路由的时候可以配置 meta 字段
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAuth: true } } ] } ]})5. 过渡效果
<template> <div id="app"> <transition-group name="router"> <router-view key="default"/> <router-view key="email" name="email"/> <router-view key="tel" name="tel"/> </transition-group> </div></template><style lang="less">.router-enter{ opacity: 0;}.router-enter-active{ transition: opacity 1s ease;}.router-enter-to{ opacity: 1;}.router-leave{ opacity: 1;}.router-leave-active{ transition: opacity 1s ease;}.router-leave-to{ opacity: 0;}</style>