1 基础
1 安装: npm i vue-router (一般是 CLI 生成)
2 切换组件的方式:
1 动态组件
2 通过路由切换组件 (常用)
3 App.vue 里面的 style样式表: 可看做是全局样式, 不要加 scoped
4 如何设置单页面应用的版心 -- 用一个限制宽度的 div 把 router-view 视图标签包起来
5 手动安装路由的一个使用步骤
1 安装 -- npm i vue-router
2 main.js -- 加载 -- 挂载
3 创建路由配置文件 -- src -- router.js
6 路由的方式实现权限管理? -- 就是不同人进去看到的信息是不一样的 -- 路由元信息
7 路由懒加载 -- 说白了就是在需要的时候加载就ok
8 在我们接手一个项目的时候 -- 想看明白结构的情况 -- 可以优先去看 -- App.vue + 路由配置表
2 路由传参
1 路由导航分类
-------------------------------------------------------------------------------------
1 声明式导航 -- a / router-link
<router-link :to="/home"> 返回首页 </router-link>
2 编程式导航 -- window.location.href = "www.baidu.com" / $router 操作路由
1 <button @click="ck1"> 返回首页 <button>
2 ck1() {
this.$router.push('/home')}
-------------------------------------------------------------------------------------
2 路由传参的理解
--------------------------------------------------------------------------------------
1 作用 -- 从页面A跳转到页面B -- 传递参数的一种方式
2 应用场景
1 有俩种传参的方式
2 需要有高亮样式的时候 -- 可用声明式导航
3 建议使用编程式导航进行路由传参
3 示例
1 从列表页跳转到详情页传递一个 id 值
2 跳转的时候我们需要知道 -- 跳转的是哪个内容的详情页
3 所以我们会传一个指定数据内容的id -- 然后通过这个id来请求对应的数据并展示
--------------------------------------------------------------------------------------
3 涉及到的俩个路由对象
--------------------------------------------------------------------------------------
1 $router == 路由操作对象 (用于操作路由)
1 跳转到指定的路由地址
this.$router.push( "/xx/xx/"+v.id)
2 跳转到指定的路由地址
this.$router.replace( "/xx/xx/"+v.id)
3 跳转到指定的历史记录
this.$router.go(-1)
2 $route == 路由信息对象 (用于获取路由信息)
1 this.$route.query.id
2 this.$route.params.id
--------------------------------------------------------------------------------------
4 路由如何传参
--------------------------------------------------------------------------------------
1 设置映射表中的 path 路径:
path: '/box' -- 改为 path: '/box/:id'
2 不同的传参方式
1 router-link :to="'/box/' + id">
2 this.$router.push('/box?id=' + 1)
3 this.$router.push( {
path: '/box', query: {
id: 1}} )
4 this.$router.push('/box'+id)
5 this.$router.push( {
name: '/box', params: {
id: 1}} )
3 不同传参方式对应的接收参数的方式:
1 this.$route.query.id
2 this.$route.params.id
--------------------------------------------------------------------------------------
3 路由知识点
1 router-link 标签
--------------------------------------------------------------------------------------
1 描述: 是 vue-router 的一个内置组件
2 作用: 用来改变浏览器的 url地址
3 使用: <router-link tag="span" exact-active-class="on" to="zh">
1 tag: 把 router-link 标签渲染成指定元素
2 exact-active-class: 当前活跃组件的高亮样式
3 to: 要跳转的路径
--------------------------------------------------------------------------------------
2 router-view 视图标签
--------------------------------------------------------------------------------------
1 描述: 是 vue-router 的一个内置组件
2 作用: 用于显示当前 url 所映射的 Vue单文件组件
3 一般会在 App.vue 放置一个基础的匿名视图标签
4 视图分为匿名视图和命名视图
5 命名视图的作用: 可以在同一个路由地址, 渲染多个不同的组件
6 命名视图的使用:
1 路由映射表: components: {
default: A1, boxa: A2, boxb: A3}
2 命名视图标签: <router-view name="boxa"> / <router-view name="boxb">
--------------------------------------------------------------------------------------
3 命名路由
--------------------------------------------------------------------------------------
1 作用: 给路由映射表中的某一项, 添加一个标识 -- 不常用
2 设置: 路由配置表中要设置的配置项 name -- {
path: '/hh', name: 'Hh', component: Hh }
3 使用: <router-link> 中 --> to="/hh" 等价于 :to="{name: 'Hh'}"
4 注意: 尽量不要和其他配置项的 name属性重复
--------------------------------------------------------------------------------------
4 路由重定向
--------------------------------------------------------------------------------------
1 作用: 判断且修改用户输入的url, 让用户去到另一个路由url (常用于把不存在的页面指向404或首页)
2 设置: 路由配置表中 redirect: {
path: '/hh', redirect: '/kk', component: Xx}
3 说明: 发现你输入的是url 是 /hh, 给你改为 /kk 并访问
--------------------------------------------------------------------------------------
5 路由别名
--------------------------------------------------------------------------------------
1 作用: 就是为一个组件, 提供另一个可访问的 url
2 设置: 路由配置表中 alias: {
path: '/hh', alias: '/kk', component: Home}
3 注意: 别名不要与映射表其他项的 path属性值重复
--------------------------------------------------------------------------------------
6 设置 404页面
--------------------------------------------------------------------------------------
1 作用: 对于无效的 url, 给用户展示一个提示页面
2 设置: 路由配置表最后面添加一个配置项: {
path: "*", name: "xx", component: Xx}
3 注意: * 表示匹配所有路径 -- 我们习惯把该配置项写在路由配置表的最后面
--------------------------------------------------------------------------------------
7 路由模式
--------------------------------------------------------------------------------------
1 URL组成: 协议 -- 域名 -- 端口号 -- 路径 -- 参数 -- 哈希值 #hash
2 hash 模式: 我们的路径前面会拼接一个 #/;
3 history 模式: 显示正常路径 (简洁); 但是打包上线的时候刷新会出现404, 需要后端的一个部署
4 CLI 设置 history: const router = new VueRouter({
routes, mode: 'hash' / 'history'})
--------------------------------------------------------------------------------------
8 动态路由:
--------------------------------------------------------------------------------------
1 作用: 某些情况下 url地址要有一些用户信息, 不同的用户要显示不同的内容, 动态路由就是动态放置一些用户信息的
2 设置: 路由映射表中: path: '/user/:id/:name'
3 使用: <router-link :to="'/user/'+ 22 + '/zhang'"> hh页面 <router-link>
--------------------------------------------------------------------------------------
9 路由嵌套
--------------------------------------------------------------------------------------
1 作用:
1 路由配置文件中, 路由映射表中, 某一配置项中, path的url属性值 (一级路由), 对应的单文件组件 (一级组件)
2 某些情况下, 需要在一级组件中, 展示另外一个组件, 路由嵌套就是其中一种实现方式
2 设置: 路由映射表中, 某一配置项中
{
path: '/home',
component: Home,
children: [
{
path: 'hh1',
component: Hh1,
children: []
}
]
}
--------------------------------------------------------------------------------------
4 导航守卫 (路由拦截)
1 概念
----------------------------------------------------------------------------------------
1 导航守卫说明:
1 导航: 路由正在发生改变 -> /home -> /about
2 守卫: 路由发生改变的时候 (判断权限), 决定是否允许跳转
2 分类:
1 全局守卫:
2 路由独享守卫:
3 组件内的守卫:
3 理解:
1 参数或查询的改变, 并不会触发进入或离开的导航守卫
2 路由切换过程: url改变 -> 判定匹配规则 -> 展示找到的组件
3 业务逻辑: 给某些页面设置权限, 让没有权限的用户访问不了这个页面
4 业务场景: 常用于需要用户信息的页面, 只有登录了才可以访问 (后台管理系统的权限)
5 操作逻辑: 每次进入权限页面的时候, 都要拿到 token做一个判断
4 常用守卫回调
1 全局前置守卫: router.beforeEach()
2 路由独享守卫: beforeEnter()
3 组件内的守卫: beforeRouteEnter()
4 全局后置钩子: router.afterEach()
----------------------------------------------------------------------------------------
2 全局前置守卫: router.beforeEach()
----------------------------------------------------------------------------------------
1 说明: 每一个路由切换之前, 都会执行这个函数
2 操作位置: main.js / router.js
3 具体操作案例: main.js
import router from './router.js'
router.beforEach( (to, from, next)=>{
if (to.path === '/main' || to.path === '/about') {
if(localStorage.getItem('token')) {
next()
} else {
next(false)
next('/log')
}
} else {
next()
}
})
4 参数说明:
to: 你要进入的目标路由 (路由信息对象)
from: 当前被拦截的路由 (路由信息对象)
next: 函数方法, 决定是否切换路由
5 案例 2
router.beforeEach((to, from, next)=>{
const pages = ['/cart', '/user']
if(pages.includes(to.path)) {
let token = localStorage.getItem('token')
if (token) {
next()} else {
next('login')}
} else {
next()}
}
----------------------------------------------------------------------------------------