<div id="app"><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link><router-view></router-view></div><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><script>const Foo = {template: `<div>Foo</div>`}
            const Bar = {template: `<div>Bar</div>`}
            const routes = [{path: '/foo', component: Foo},{path: '/bar', component: Bar}]const router = new VueRouter({routes})new Vue({router,el: '#app',mounted () {console.log(this.$route)console.log(this.$router)}})</script>

<router-link to="/foo/999">Go to Foo</router-link>
{path: '/foo/:id', component: Foo}
this.$route.params.id
// ==> 999

watch:{'$route'(to, from) {}
}

beforeRouteUpdate (to, from, next) {}

const User = {template: `<div>User:<router-link to="/one">Go to one</router-link><router-link to="/two">Go to two</router-link><router-view></router-view></div>`,
}
const One = {template: `<div>One</div>`}
const Two = {template: `<div>Two</div>`}
const routes = [{path: '/user',component: User,children: [{path: '/one', component: One},{path: '/two', component: Two},]},
]

{path: '/bar/:id', component: Bar, name: 'newbar'}
声明式 <router-link :to="{ name: 'newBar', params: { id: 123 }}">bar</router-link>
编程式 this.$router.push({ name: 'newBar', params: { id: 123 }})

this.$router.push('/bar')
//字符串
this.$router.push({path: '/bar'})
//对象
this.$router.push({path: '/bar/123'})
// 完整路径   /bar/123
this.$router.push({ name: 'newbar', params: { id: 123 }})
// 命名的路由   /bar/123
this.$router.push({ path: 'bar', query: { plan: 'private' }})
// 带查询参数，变成 /bar?plan=privatethis.$router.go(n)// 在 history 记录中向前或者后退n步

<router-view></router-view>
<router-view name="one"></router-view>
const One = {template: `<div>One</div>`}
const Default= {template: `<div>Default</div>`}
const routes = [{path: '/',components: {default: Default,one: One}}]

const Foo = {template: `<div>Foo {{id}}</div>`,props: ['id']// this.$route.params.id
}
const routes = [{path: '/foo/:id',component: Foo,props: true}
]
// 布尔 props: true/false
// 对象 props: {id: XXX}
// 函数 props: route => {return {id: route.parame.id  }
}

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

router.beforeEach((to, from, next) => {})
//进入路由前
router.beforeResolve(to, from, next) => {})
//组件守卫和异步路由守卫解析
router.afterEach(to, from) => {})
//进入路由后

beforeEnter: (to, from, next) => {})
//相同路由触发一次

beforeRouteEnter (to, from, next) {}// 进入导航之前 不能获取this
beforeRouteUpdate (to, from, next){}// 组件复用,路由改变
beforeRouteLeave (to, from, next) {}// 导航离开