Vue学习计划-Vue2--VueCLi(九)vue路由详解

2023-12-18 12:20

本文主要是介绍Vue学习计划-Vue2--VueCLi(九)vue路由详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 介绍

  1. 理解: 一个路由(route)就是一组映射关系(key-value), 多个路由需要路由器(router)进行管理
  2. 前端路由: key是路径,value是组件,通俗的将就是通过一个路径key,可以访问vue的组件,实现组件的访问与跳转以及传参

2. 基本使用

  1. 安装vue-router, 命令npm i vue-router
  2. 应用插件:Vue.use(vueRouter)
  3. 编写router配置项:

配置component有两种方式

  1. 第一种:提前加载
    import HomeView from '../views/HomeView.vue'
    component: HomeView
  2. 第二种:懒加载,等跳转到该路由的时候再加载
    component: () => import('../views/AboutView.vue')
import Vue from 'vue'
// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入 HomeView 组件
import HomeView from '../views/HomeView.vue'
// 应用VueRouter
Vue.use(VueRouter)// 配置路由规则
const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue')}
]// 创建router实例对象,去管理一组一组的路由规则
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})// 暴露router
export default router
  1. 实现切换(选择路由会有默认class名router-link-exact-active)可设置高亮样式
    <router-link to="/about">About</router-link>

  2. 指定显示位置
    <router-view/>

3. 几个注意点

  1. 路由组件通常存放在views/pages文件夹,一般组件通常存放在components文件夹
  2. 通过切换,“隐藏”了的路由组件,默认是被销毁的,需要的时候再去挂载
  3. 每个组件都有自己的$route属性,里面存储这自己的路由信息,当然如果有时候我们需要在组件内监听路由的变化或者拿到路由的参数,在watch内深度监听$route试试吧
  4. 每个应用只有一个router,可以通过$router属性获取到

4. 多级路由

  1. 配置路由规则,使用children配置项:
const routes = [{path: "/home",name: "home",component: HomeView,},{path: "/about",name: "about",component: () => import("../views/AboutView.vue"),children: [<!-- 子路由path不加 / -->{path: "news",name: "news",component: () => import("../views/NewsView.vue"),},{path: "message",name: "news",component: () => import("../views/MessageView.vue"),},],},
];
  1. 跳转(需要完整路径):

<router-link to="/about/news">News</router-link>

5. 命名路由(给路由添加name)

  1. 作用: 可以简化路由的跳转
  2. 如何使用:
    1. 给路由命名:
      {path: "/about",name: "about", // 给路由起名字component: () => import("../views/AboutView.vue"),children: [{path: "news",name: "news",component: () => import("../views/NewsView.vue"),},],}
    
    1. 简化跳转:
     // 字符串跳转<router-link :to="{ name: 'news' }">News</router-link>// 对象跳转:to="{name: 'news',query: {id: item.id,name: item.name,},}"
    

6. 路由的query参数

路径呈现就是http://localhost:8080/news?id=1&name=hello

  1. 传递参数
<ul>
<li v-for="item in list" :key="item.id">
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<!-- <router-link:to="`/about/message/article?id=${item.id}&name=${item.name}`">{{ item.name }}</router-link
> -->
<!-- 跳转路由并携带query参数,to的对象写法 -->
<router-link:to="{path: '/about/message/article',query: {id: item.id,name: item.name,},}">{{ item.name }}</router-link
>
</li>
</ul>
  1. 接收参数:
$route.query.id 
$route.query.name

7. 路由的params参数

路径呈现就是http://localhost:8080/news/1/hello

  1. 配置路由,声明接收params参数
 {path: "message",name: "messages",component: () => import("../views/MessageView.vue"),children: [{path: "article/:id/:name",name: "article",component: () => import("../views/ArticleView.vue"),},],},
  1. 传递参数
   <!-- 路由跳转并携带params参数 --><!-- <router-link :to="`/about/message/article/${item.id}/${item.name}`">{{item.name}}</router-link> --><!-- 跳转路由并携带params参数,to的对象写法 --><router-link:to="{name: 'article',params: {id: item.id,name: item.name,},}">{{ item.name }}</router-link>

特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!!

  1. 接收参数
    $route.params.id$route.params.name

8. 路由的props配置

  1. 作用: 让路由组件更方便的收到参数
{name: 'about',path: '/about/:id',component: About// 第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给About组件// props: {a: 900}// 第二种写法:props值为布尔值,布尔值为true,则把路由收到的所以params参数通过props传给ABout组件// props: true// 第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给About组件props(route) {return {id: route.query.idname: route.query.name}}
}

9. <router-link>replace属性

  1. 作用:控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的记录有两中写入方式: 分别为pushreplace,push是追加历史记录,replace是替换当前记录,路由跳转时候默认为push
    3.如何开启replace模式:<router-link replace ....>About</router-link>

10. 编程式路由导航

  1. 作用: 不借助<router-link>实现路由跳转,让路由跳转更加灵活
  2. 具体代码
<!-- 路由跳转 -->
this.$router.push({ name: "article",params: {id: item.id,name: item.name,},
})
.catch(() => {// console.log(res);
});<!-- 路由替换 -->
this.$router.replace({ name: "article",params: {id: item.id,name: item.name,},
})
.catch(() => {// console.log(res);
});this.$router.back() // 后退
this.$router.forward() // 前进
<!-- go可返回可前进, 正数前进,负数后退 -->
this.$router.go(number)

11. 缓存路由组件(keep-alive包裹)

路由组件在切换的时候 是会被销毁的。当有时候我们切换的时候想要做一个缓存,把上一个路由组件缓存下来

  1. 作用:让不显示的路由保持挂载,不被销毁
  2. 具体编码:
<!-- include 是组件名 -->
<keep-alive include="NewsView"><router-view></router-view>
</keep-alive>
<!-- 若是多个 --><keep-alive :include="['NewsView']"><router-view></router-view>
</keep-alive>

12. 两个新的生命周期钩子(当缓存路由的时候激活)

  1. 作用: 路由组件所独有的两个钩子,用于捕获路由组件的激活状态
  2. 具体名字:
    1. activated路由组件被激活时触发
    2. deactivated路由组件失活时触发
  3. 我们重点解释一下这两个生命周期的钩子的用处?举个栗子:
  • 我们的路由组件内有news路由:
    在这里插入图片描述

  • news组件内部呢我们代码如下:
    在这里插入图片描述

    1. 在要展示路由组件内呢,我们第一次不对路由组件做缓存:
      在这里插入图片描述
  • 浏览器运行效果,以及我们切换路由时的控制台输出
    在这里插入图片描述
    分析:我们可以看出,news路由组件内部的两个声明周期activated,deactivated并未进入

    1. 现在我们做缓存
      在这里插入图片描述
  • 浏览器运行效果:
    在这里插入图片描述
    分析:我们可以看出:

    1. mounted只是在初次加载时进入了一次,后续就没有在进入
    2. beforeDestroy一直未进入,因为缓存起来了,input内的输入的内容页未重新渲染
    3. activated每次进入news路由的时候进入此生命周期
    4. deactivated每次离开news路由的时候进入此生命周期
    5. 总结:所以当我们把某个路由组件缓存起来的时候,当我们想要初始或者离开的时候做些什么操作,可以在这两个生命周期里编写操作

13. 路由守卫(前置守卫beforeEach,后置守卫afterEach

router.beforeEach/afterEach((to, from, next)接收三个参数
to:去往哪个路由
from: 来自于哪个路由
next: 放行,往下继续

  1. 作用: 对路由进行权限控制
  2. 分类:全局守卫、独享守卫、组件内守卫
  3. 全局守卫:
// 全局前置守卫,初始化时执行,每次路由切换前执行
router.beforeEach((to, from, next) => {console.log(to, from, next)if(to.meta.xxx){ // 判断路由跳转前的逻辑next() // 放行}
})// 全局后置守卫,初始化时执行,每次路由切换后执行
router.afterEach((to, from) => {console.log(to, from)if(to.meta.title){ document.title = to.meta.title}
})
  1. 独享守卫:写在固定某个路由内的,只针对个别路由做一些操作
path: "/about",
name: "about",
...
beforeEnter(to, from, next){console.log(to, from, next)if(to.meta.xxx){ // 判断路由跳转前的逻辑next() // 放行}
}
  1. 组件内路由守卫(进入守卫beforeRouteEnter,离开守卫beforeRouteLeave
...
mounted(){}
// 进入守卫,通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from, next){}
// 离开守卫,通过路由规则,离开该组件时被调用
beforeRouteLeave(to, from, next){}

14. 路由器的两种工作模式

  1. 对于一个url来说,什么是hash值? ————#及其后面的内容就是hash值.
  2. hash值不会包含在HTTP请求中,即:hash值不会带给服务器
  3. hash模式:
    1. 地址中永远带着#,不美观
    2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记不合法
    3. 兼容性较好
  4. history模式:
    1. 地址干净,美观
    2. 兼容性和hash模式相比略差
    3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题

这篇关于Vue学习计划-Vue2--VueCLi(九)vue路由详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/508353

相关文章

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时:2478ms)【2】集合方式foreach(一万条数

Python装饰器之类装饰器详解

《Python装饰器之类装饰器详解》本文将详细介绍Python中类装饰器的概念、使用方法以及应用场景,并通过一个综合详细的例子展示如何使用类装饰器,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录1. 引言2. 装饰器的基本概念2.1. 函数装饰器复习2.2 类装饰器的定义和使用3. 类装饰

MySQL 中的 JSON 查询案例详解

《MySQL中的JSON查询案例详解》:本文主要介绍MySQL的JSON查询的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 的 jsON 路径格式基本结构路径组件详解特殊语法元素实际示例简单路径复杂路径简写操作符注意MySQL 的 J

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Python ZIP文件操作技巧详解

《PythonZIP文件操作技巧详解》在数据处理和系统开发中,ZIP文件操作是开发者必须掌握的核心技能,Python标准库提供的zipfile模块以简洁的API和跨平台特性,成为处理ZIP文件的首选... 目录一、ZIP文件操作基础三板斧1.1 创建压缩包1.2 解压操作1.3 文件遍历与信息获取二、进阶技

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

Java中的@SneakyThrows注解用法详解

《Java中的@SneakyThrows注解用法详解》:本文主要介绍Java中的@SneakyThrows注解用法的相关资料,Lombok的@SneakyThrows注解简化了Java方法中的异常... 目录前言一、@SneakyThrows 简介1.1 什么是 Lombok?二、@SneakyThrows

Java中字符串转时间与时间转字符串的操作详解

《Java中字符串转时间与时间转字符串的操作详解》Java的java.time包提供了强大的日期和时间处理功能,通过DateTimeFormatter可以轻松地在日期时间对象和字符串之间进行转换,下面... 目录一、字符串转时间(一)使用预定义格式(二)自定义格式二、时间转字符串(一)使用预定义格式(二)自

Redis Pipeline(管道) 详解

《RedisPipeline(管道)详解》Pipeline管道是Redis提供的一种批量执行命令的机制,通过将多个命令一次性发送到服务器并统一接收响应,减少网络往返次数(RTT),显著提升执行效率... 目录Redis Pipeline 详解1. Pipeline 的核心概念2. 工作原理与性能提升3. 核

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中