版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
前言
前段路由:
- 多页面应用 有多个html文件,通过a标签的连接联通各个页面
- 缺点
- 开发起来太冗余,编译、压缩很耗时间
- 页面之间的跳转速度太慢,这个时候就会出现一个严重的问题,白屏
- 单页面应用
- 不需要刷新页面,因为它就是一个页面
- 这个页面内容在切换
- 单页面内容之间的切换要想实现我们就是用路由了
- 如今我们的app、后台管理系统 主要的开发形式就是spa
Vue路由模式
- hash
- 应用于浏览器
- 传统的路由模式,兼容性更好
- history 【 推荐 】
- 应用于浏览器
- H5 新型的路由模式,性能更好,但是需要后端支持
- 后端支持指的就是: 需要: php/java/python 等后端开发者的支持
- abstrict
- 应用于服务端【 后台 】
Vue路由基础
-
安装
-
安装 vue-router yarn add vue-router
-
在src目录下创建一个router目录, 里面创建一个index.js文件 , 这个目录就是router的模块
-
引入第三方的依赖包, 并注册路由
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use( VueRouter ) //使用vue-router这个第三方插件 // 1. 创建模块 // const router = new VueRouter( options ) const router = new VueRouter({ // mode: 'hash', // http://localhost:8080/#/home mode: 'history', // http://localhost:8080/home 得后端支持, // routes: [{}], routes是路由表,也就是我们在这个表中统一进行项目中所有路由的配置,一个对象就是一个路由的配置 routes })
-
注意: import这个关键字要放在整个文件的上层
-
-
创建路由的配置文件
- 可能有一下几种情况
- routes
- route
- router
- router.config.js
-
目录
- views/pages 放页面组件的地方
-
我们用router-view组件来接受routes配置中的component选项
-
我们可以使用 router-link 组件 进行页面跳转
- router-link组件身上加to属性 , to属性的属性值 为 routes配置中的path选项
- router-link组件默认会解析为a标签
- router-link组件加 tag 属性可以解析为 任何标签
- router-link组件加 active-class 属性 可以实现路由激活
- router-link组件加 keep-alive 属性, 可以实现路由组件的动态缓存
-
路由重定向
-
当页面第一次的打开的时候, 需要做一个重定向, 就是要自动跳转到 /home 这个路由上
const routes = [ { //我们要求这个路由的配置要放在路由表的最上方 path: '/', redirect: '/home' } ]
-
业务: 错误路由匹配
const routes = [ { path: '/', redirect: '/home' //重定向 }, { path: '/home', component: Home }, { //这个就是错误路由匹配, vue规定这个必须放在最下面,它必须将上面的路由全找一遍,找不到才用当前这个 path: '*', redirect: '/error' } ]
-
Vue路由高级
-
vue路由模式的确定 mode
- 如果你使用的是 hash , 那么a标签就可以了
- 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件
-
二级路由配置
{ path: '/home', component: Home, children: [ // 用children选项来表示子路由表 { path: 'login', // 注意: 这里是没有 / , 子路由不写 / ,使用时自动加 component: Login, name: 'login' // 命名路由,目的是为了让我们将来使用路径简洁 } ] }
<router-link tag = "div" keep-alive active-class = "active" class="flex-sm-fill text-sm-center nav-link" to = "/home/login" > 登陆页面 </router-link>
注意: 写好配置之后,不要忘记了, 在对应的一级路由的组件中书写 路由展示区域
-
命名路由
- 作用 : 就是简写路径了
{ path: '/shopcar', component: Shopcar, //子路由 children: [ { path: '/minecar', // 容易犯错点 /yyb X component: Minecar, name: 'minecar' //命名路由 其他路由可以直接通过name定义的名字跳转 } ] },
necar’, // 容易犯错点 /yyb X
component: Minecar,
name: ‘minecar’ //命名路由 其他路由可以直接通过name定义的名字跳转
}
]
},