定义好Vue Router的入口文件之后,接下来,要在项目的入口文件(index.js)中使用
import Vue from ‘vue’
import App from ‘./app.vue’
import VueRouter from ‘vue-router’
import createRouter from ‘./config/router’
Vue.use(VueRouter)
const router = createRouter()
new Vue({
router,
render: (h) => h(App)
}).$mount(root)
Vue-router之配置
=============
详解Vue Router的入口文件router.js的配置
import Router from ‘vue-router’
import routes from ‘./routes’
export default () => {
return new Router({
routes,
// 链接可以加前缀
base: ‘/base/’,
// 链接访问方式,vue默认为hash模式,可设置为history模式
mode: ‘history’,
// 页面中使用/login设置导航
// 当前激活状态页面的对应跳转链接会有router-link-exact-active,router-link-active两个样式,可以自定义样式名称
linkActiveClass: ‘a’,
linkExactActiveClass: ‘b’,
// 页面路径跳转时,是否进行滚动行为,并且可指定滚动到什么位置
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {x: 0, y: 0}
}
}
// 不是所有浏览器都支持前端路由方式(history模式),设置成true,vue会自动转换成hash转换方式
// 若设置成false,单页应用就变成了多页应用,每次页面跳转都会请求后端返回新的内容,比较耗时
fallback: true
// vue默认已处理了链接上的参数,以下方法可自定义转换方式
parseQuery (query) {
// 将字符串转成obj
},
stringifyQuery (obj) {
// 将obj转成字符串
}
})
}
Vue-router之路由参数传递
=================
动态路由、路由传参、懒加载、命名视图、路由命名、路由元信息、子路由、路由钩子
{
// 动态路由其实又可以叫做路由传参
path: ‘/login/:id’,
// 推荐用法props: true,实现组件中不需要写this. r o u t e . i d , . v u e 文件中写了 route.id,.vue文件中写了 route.id,.vue文件中写了route相当于耦合,避免之后vue-router升级之后写法不一样
// 如果组件中使用了$route,则不能当成一个单独的组建使用,因为会去路由上找id值,使用了props接受参数,其他组件只要通过prop传递
// 尽量使vue和$route解耦,让组件复用性更高
props: true,
// props: {id: ‘111’},
// props: (route) => ({id: route.query.id}),
component: Login,
// 懒加载,页面进入时再去加载组件,避免一开始加载所有组件(非当前组件)的js
// component: () => import(‘…/views/todo/todo.vue’), // 异步路由配置,首屏加载速度更快
// 命名视图
// 有时候想同时(同级)展示多个视图,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。
//
//
//
// components: {
// default: Login,
// a: Sidebar,
// b: Header
// },
// 路由命名。可通过路由名称进行路由跳转/app
name: ‘app’,
// 路由元信息,保存路由中的信息 在写HTML页面时,可以在head标签中定义meta,mate即页面源信息,这些信息有利于seo处理。而在vue组件中很难写这东西
meta: {
title: ‘this is app’,
description: ‘description’
},
// 子路由
children: []
// 路由钩子
// beforeEnter (to, from, next) {
// console.log(‘app route before enter’)
// next()
// }
}
在使用懒加载时,需要安装对应插件
npm i babel-plugin-syntax-dynamic-import -D
安装完成,修改.babelsrc
Vue-router之导航守卫
===============
vue-router中的导航钩子按定义位置不同(执行时机也不同)分为全局钩子、路由级钩子和组件级钩子。
在项目入口文件(index.js)中的路由守卫,全局钩子
import Vue from ‘vue’
import App from ‘./app.vue’
import VueRouter from ‘vue-router’
import createRouter from ‘./config/router’
Vue.use(VueRouter)
const router = createRouter()
// 全局路由钩子
router.beforeEach((to, from, next) => {
// 路由跳转前可做数据校验,例如判断是否登陆
console.log(‘global beforeEach’)
next()
})
router.beforeResolve((to, from, next) => {
console.log(‘global beforeResolve’)
next()
})
router.afterEach((to, from) => {
console.log(‘global afterEach’)
})
new Vue({
router,
render: (h) => h(App)
}).$mount(root)
在 router.js文件 中的路由守卫,路由级钩子
import Login from ‘…/views/login/login.vue’
export default [
{
path: ‘/login’,
component: Login,
beforeEnter (to, from, next) {
console.log(‘router beforeEnter’)
next()
}
}
]
在 .vue文件中 的路由守卫,组件级钩子
组件级钩子