目录
1、前端路由的概念与原理
1.1什么是路由
路由(英文:router)就是对应关系。
1.2SPA 与前端路由
1.3什么是前端路由
通俗易懂的概念:
Hash 地址(类似锚点链接)
与
组件
之间的
对应关系
。
锚链接演示:(其特点是会产浏览历史:点击<--符号实现)
1.4前端路由的工作方式
1.5实现简易的前端路由
步骤1:通过
<component>
标签,结合
comName
动态渲染组件。示例代码如下:
步骤2:在 App.vue 组件中,为 <a> 链接添加对应的 hash 值:
步骤3:在 created 生命周期函数中,监听浏览器地址栏中 hash 地址的变化,动态切换要展示的组件的名称:
2、 vue-router 的基本使用
2.1什么是 vue-router
vue-router
是 vue.js 官方给出的
路由解决方案
。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。
vue-router 的官方文档地址:https://router.vuejs.org/zh/
2.2vue-router 安装和配置的步骤
- 安装 vue-router 包
- 创建路由模块
- 导入并挂载路由模块
- 声明路由链接和占位符
2.2.1 在项目中安装 vue-router
2.2.2 创建路由模块
2.2.3 导入并挂载路由模块
在Vue项目中,要想把路由用起来,必须把路由实例对象,通过下面的方式进行挂载
2.2.4 声明路由链接和占位符
2.2.5声明路由的匹配规则
使用router-link代替a链接
3、vue-router 的常见用法
3.1路由重定向
默认页面加载之后,直接显示首页:
3.2嵌套路由
3.2.1声明子路由链接和子路由占位符
3.2.2通过 children 属性声明子路由规则
默认子路由和子路由重定向实现的效果一样,可以自己选择用哪个
3.3 动态路由匹配
3.3.1 动态路由的概念
3.3.2$route.params 参数对象
3.3.3使用 props 接收路由参数
3.3.4拓展query和fullPath
3.4声明式导航 & 编程式导航
3.4.1vue-router 中的编程式导航 API
vue-router 提供了许多编程式导航的 API,其中最常用的导航 API 分别是:
①
this.$router.
push
('hash 地址')
⚫
跳转到指定 hash 地址,并
增加
一条历史记录
②
this.$router.
replace
('hash 地址')
⚫
跳转到指定的 hash 地址,并
替换掉当前的
历史记录
③
this.$router.
go
(数值 n)
⚫
实现导航历史前进、后退
3.4.2$router.go 的简化用法
3.5导航守卫
3.5.1全局前置守卫
3.5.2守卫方法的 3 个形参
3.5.3next 函数的 3 种调用方式
3.5.4控制后台主页的访问权限
4、后台管理案例
4.1案例效果
4.2安装和配置路由
4.2.1安装
4.2.2配置
4.3基于路由渲染登录组件
4.4模拟登录功能
4.5实现后台主页的基础布局
4.6退出登录并控制访问权限
退出登录之后,把login改成home,会继续跳转到后台主页,这是不允许的,需要用全局前置守卫来解决
解决办法: