前言
一个web应用路由定义的是否合理是判断这个应用是否合格的基础条件之一，在spa开发模式之前，前端开发基本不用考虑路由的定义这块基本都是后台在完成，但随着spa的推广前后端分离的大趋势下，前端路由定义的任务便落在的我们前端开发者身上。本节我们就来聊聊vue中vue-router的路由定义与配置。
vue-router起到的作用
- 路由匹配：组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。
- 动态路由：以多个路由映射到同一个组件，即把某种模式匹配到的所有路由，全都映射到同个组件。
- 路由拦截（导航守卫）：登录认证以及权限认证都需要导航守卫来控制。
- 前端控制路由
vue-router使用方式
引入
- 将vue-router引入
- 定义路由组件
import Foo from './Foo.vue' import Test from './Test.vue'
- 配置路由和组件到映射
const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Test } ]
- 将路由配置文件放到VueRouter对象中
let router = new VueRouter({ routes, //默认为hash模式 mode:'history' }) export default router
- 将路由实例挂载到vue对象上
const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) const app = new Vue({ router }).$mount('#app')
主要api详解
- 配置路由
interface RouteConfig = { path: string,//路径 component?: Component,//路径对应加载对组件 name?: string, // 命名路由 components?: { [name: string]: Component }, // 命名视图组件 redirect?: string | Location | Function,//重订向对路由 props?: boolean | Object | Function, alias?: string | Array<string>,//别名 children?: Array<RouteConfig>, // 嵌套路由的自路由 beforeEnter?: (to: Route, from: Route, next: Function) => void,//路由守卫 meta?: any,//其他项 挂载在this.$route上 // 2.6.0+ caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false) pathToRegexpOptions?: Object // 编译正则的选项 }
- 路由模式：改变视图的同时不会向后端发出请求
mode:'history'//默认为hash模式
- hash模式是带有#的路由模式，一般我们生产环境部署都不会采用他。
- 优点：当没有匹配的路由时不会404，即服务端对hash模式影响不大
- 缺点：带有#号，不符合正常路由规范
- history模式是你实际配置对路由，无#号
- 优点1：设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL
- 优点2: 实际设置路由，无#号。
- 优点3: 添加记录（与hash路由相比，无论变化路由是否相同都会添加到记录栈中）
- 优点4: 添加任意类型到记录（hash只能添加短字符串）
- 路由跳转
- 常用api如下：
router.push router.replace router.go router.back router.forward
- 路由导航守卫 vue-router中常用到路由导航守卫有beforeEach和afterEachbeforeEach
- 路由前置导航守卫，回调函数有三个参数from to next在调用next前 路由不会被解析。
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... next() })
- afterEach路由后置钩子
- 过渡动效：transition组件,使用方式如下
<transition> <router-view></router-view> </transition>
- 滚动:vue-router有个可以控制路由跳转到新页面是的滚动位置的属性
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 } })
注意: 这个功能只在支持 history.pushState 的浏览器中可用。详细请查看官方文档
总结
路由配置现在已经是前端工程中必不可少的配置，合理的路由配置能大大提升用户体验度，并且还能改善项目结构。
