基础案例
<router-link to="/foo/:id/:name">goto foo</router-link> <!-- 默认渲染成a标签, 匹配上 .router-link-active类名-->
<router-link to="" replace tag="li"></router-link>
<router-link to="" append> </router-link> <!-- 从a跳到b 为 ／a／b -->
<router-link to="/user" exact> </router-link><!-- 路径全包含该路由的时候被点亮，加上active-class-->
<router-link to="foo" active-class="new-name">
<a>真是地址</a>
</router-link>
<transition :name="tranName">
<router-view></router-view> <!-- 出口，可以多层嵌套-->
</transition>
<router-view name="one"></router-view> <!--命名视图,默认为default-->
import Vue from 'vue'
import VueRouter from 'vue-router'
const foo = {
template: '<div></div>',
beforeRouteEnter: (to, from, next) => {
next（vm => {} )
//不能获取this实例，所以通过回调传参
},
beforeRouteUpdate: (to, from, next) => {
// 路由跳转的时候调用（组件复用），可以访问this
},
beforeRouteLeave: (to, from, next) => {
／/导航离开的时候调用，可以访问this
next（false） //防止用户为保存离开
},
}
routes = [
{
path: '/foo',
name: 'foo',
component: Foo,
alias: 'boo', //定义别名
children: [
{path: '', component: anything}
{path: 'child', component: child}
],
beforeEnter: (to, from, next) => {
}
},
{
path: '/name',
components: { //有s，并且是标明各个视图的匹配
default: foo,
one: bar
}
},
{
path: '/name',
redirect: to => {
return '/foo'
}
},
{
path: '/name',
redirect: {name: foo} //可以是字符串或者对象或者函数
},
{path: '/foo/:id?bar', component: Foo}, //id有无都可
{path: '/foo/:id(\\d+)', component: Foo}, //正则匹配数字的id
{path: '/foo/*', component: 404} //匹配一切
]
new VueRouter({
mode: 'history', //模式有history/hash/abstract
base: '/app/',
routes,
})
new Vue({
router
}).$mount('#app')
说明：
动态路径参数：动态路径参数：{{
route.params.name}}
router.query,
route.name，
route.fullPath，$route.path
匹配规则：匹配到多个路由时，先定义就先匹配到
嵌套路由以／开头会被当作跟路径
-
编程式导航
router.push('foo') <===> <router-link to="">...
router.push({path: 'foo'})
router.push({name: 'foo', params: {id: 123}, query: {p: 2}})
router.replace('foo') <===> <router-link to="" replace>...
router.go(1);
router.go(-1);
进阶案例
const router = new VueRouter({})
router.beforeEach((to, from, next) => {
next() //进入管道的下一个钩子
next(false) //终端当前导航，重置到from
next({path: '/foo'}) //中断导航，跳转到新导航
})
router.afterEach(route => {
})
说明：
to：即将进入的路由对象
from: 离开的路由对象
next：resolve的方法，必须调用来结束钩子调用
可以设置全局的钩子，或者组件内的钩子
-
滚动行为，只在history模式下生效
new VueRouter({
mode: 'history' //模式有history/hash/abstract routes， scrollBehavior (to, from, savedPosition) { if(savedPosition) { return savedPosition //浏览器前进或后退的时候回到记忆位置 } else { return {x: 0, y: 0} //返回顶部 return {selector: to.hash} //返回锚点 // to.matched.length 匹配的长度 } }})
总结router实例和方法
属性：
router.app
router.mode
router.currentRoute
方法：
router.beforeEach()
router.beforeResolve()
router.afterEach()
router.push()
router.replace()
router.go()
router.back()
fouter.forward()
router.getMatchedComponents()
router.resolve()
router.addRoutes()
router.onReady()
- 完整的路由解析规则
导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
