return new Router({ routes, mode: 'history',//默认使用hash# base: '/base/', //在path前面都会加上/base/,基路径 // 点击calss名字 linkActiveClass: 'active-link', //匹配到其中一个子集 linkExactActiveClass: 'exact-active-link',//完全匹配 })
linkExactActiveClass(string)
默认值: "router-link-exact-active"
全局配置 <router-link> 精确激活的默认的 class。
scrollBehavior(Function)
路由跳转后是否滚动
export default () => { return new Router({ routes, mode: 'history',//默认使用hash# base: '/base/', //在path前面都会加上/base/,基路径 //页面跳转是否需要滚动 /* to:去向路由,完整路由对象 from:来源路由 savedPosition:保存的滚动位置 */ scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }, }) }
parseQuery / stringifyQuery (Function)
/每次import都会创建一个router，避免每次都是同一个router export default () => { return new Router({ routes, mode: 'history',//默认使用hash# base: '/base/', //在path前面都会加上/base/,基路径 // 路由后面的参数?a=2&b=3,string->object parseQuery (query) { }, //object->string stringifyQuery (obj) { } }) }
fallback(boolean)
当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
如果设置为false,则跳转后刷新页面，相当于多页应用
<router-link>
过渡动效
<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：
<transition> <router-view></router-view> </transition>
高级用法
命名视图
<router-view></router-view> <router-view></router-view> <router-view></router-view> const router = new VueRouter({ routes: [ { path: 'https://www.jb51.net/', components: { //默认组件 default: Foo, //命名组件 a: Bar, b: Baz } } ] })
导航守卫
全局守卫
import Vue from 'vue' import VueRouter from 'vue-router' import App from './app.vue' import './assets/styles/global.styl' // const root = document.createElement('div') // document.body.appendChild(root) import createRouter from './config/router' Vue.use(VueRouter) const router = createRouter() // 全局导航守卫（钩子） // 验证一些用户是否登录 router.beforeEach((to, from, next) => { console.log('before each invoked') next() // if (to.fullPath === '/app') { // next({ path: '/login' }) // console.log('to.fullPath :'+to.fullPath ) // } else { // next() // } }) router.beforeResolve((to, from, next) => { console.log('before resolve invoked') next() }) // 每次跳转后触发 router.afterEach((to, from) => { console.log('after each invoked') }) new Vue({ router, render: (h) => h(App) }).$mount("#root")
路由独享的守卫
可以在路由配置上直接定义 beforeEnter 守卫：
export default [ { path:'https://www.jb51.net/', redirect:'/app' //默认跳转路由 }, { path: '/app', // 路由独享的守卫钩子 beforeEnter(to, from, next) { console.log('app route before enter') next() } component: Todo, } ]
组件内的守卫
export default { //进来之前 beforeRouteEnter(to, from, next) { // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 console.log("todo before enter", this); //todo before enter undefined //可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。 next(vm => { // 通过 `vm` 访问组件实例 console.log("after enter vm.id is ", vm.id); }); }, //更新的时候 beforeRouteUpdate(to, from, next) { console.log("todo update enter"); next(); }, // 路由离开 beforeRouteLeave(to, from, next) { console.log("todo leave enter"); const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { //以通过 next(false) 来取消。 next(false) } }, props:['id'], components: { Item, Tabs }, mounted() { console.log(this.id) }, };