Vue学习计划-Vue2--VueCLi（九）vue路由详解

2023-12-18 12:20
文章标签 javascript 学习 详解 vue 路由 vue2 计划 frontend vuecli

本文主要是介绍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. 浏览器的记录有两中写入方式： 分别为push和replace,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。

相关文章

Oracle的to_date()函数详解

Oracle的to_date()函数详解

《Oracle的to_date()函数详解》Oracle的to_date()函数用于日期格式转换,需要注意Oracle中不区分大小写的MM和mm格式代码,应使用mi代替分钟,此外,Oracle还支持毫... 目录oracle的to_date()函数一.在使用Oracle的to_date函数来做日期转换二.日
阅读更多...
Java实现任务管理器性能网络监控数据的方法详解

Java实现任务管理器性能网络监控数据的方法详解

《Java实现任务管理器性能网络监控数据的方法详解》在现代操作系统中,任务管理器是一个非常重要的工具,用于监控和管理计算机的运行状态,包括CPU使用率、内存占用等,对于开发者和系统管理员来说,了解这些... 目录引言一、背景知识二、准备工作1. Maven依赖2. Gradle依赖三、代码实现四、代码详解五
阅读更多...
Mysql 中的多表连接和连接类型详解

Mysql 中的多表连接和连接类型详解

《Mysql中的多表连接和连接类型详解》这篇文章详细介绍了MySQL中的多表连接及其各种类型,包括内连接、左连接、右连接、全外连接、自连接和交叉连接,通过这些连接方式,可以将分散在不同表中的相关数据... 目录什么是多表连接？1. 内连接（INNER JOIN）2. 左连接（LEFT JOIN 或 LEFT
阅读更多...
Java中switch-case结构的使用方法举例详解

Java中switch-case结构的使用方法举例详解

《Java中switch-case结构的使用方法举例详解》：本文主要介绍Java中switch-case结构使用的相关资料,switch-case结构是Java中处理多个分支条件的一种有效方式,它... 目录前言一、switch-case结构的基本语法二、使用示例三、注意事项四、总结前言对于Java初学者
阅读更多...
Linux内核之内核裁剪详解

Linux内核之内核裁剪详解

《Linux内核之内核裁剪详解》Linux内核裁剪是通过移除不必要的功能和模块,调整配置参数来优化内核,以满足特定需求,裁剪的方法包括使用配置选项、模块化设计和优化配置参数,图形裁剪工具如makeme... 目录简介一、 裁剪的原因二、裁剪的方法三、图形裁剪工具四、操作说明五、make menuconfig
阅读更多...
详解Java中的敏感信息处理

详解Java中的敏感信息处理

《详解Java中的敏感信息处理》平时开发中常常会遇到像用户的手机号、姓名、身份证等敏感信息需要处理,这篇文章主要为大家整理了一些常用的方法,希望对大家有所帮助... 目录前后端传输AES 对称加密RSA 非对称加密混合加密数据库加密MD5 + Salt/SHA + SaltAES 加密平时开发中遇到像用户的
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
Springboot使用RabbitMQ实现关闭超时订单(示例详解)

Springboot使用RabbitMQ实现关闭超时订单(示例详解)

《Springboot使用RabbitMQ实现关闭超时订单(示例详解)》介绍了如何在SpringBoot项目中使用RabbitMQ实现订单的延时处理和超时关闭,通过配置RabbitMQ的交换机、队列和... 目录1.maven中引入rabbitmq的依赖：2.application.yml中进行rabbit
阅读更多...
C语言线程池的常见实现方式详解

C语言线程池的常见实现方式详解

《C语言线程池的常见实现方式详解》本文介绍了如何使用C语言实现一个基本的线程池,线程池的实现包括工作线程、任务队列、任务调度、线程池的初始化、任务添加、销毁等步骤,感兴趣的朋友跟随小编一起看看吧... 目录1. 线程池的基本结构2. 线程池的实现步骤3. 线程池的核心数据结构4. 线程池的详细实现4.1 初
阅读更多...
Python绘制土地利用和土地覆盖类型图示例详解

Python绘制土地利用和土地覆盖类型图示例详解

《Python绘制土地利用和土地覆盖类型图示例详解》本文介绍了如何使用Python绘制土地利用和土地覆盖类型图,并提供了详细的代码示例,通过安装所需的库,准备地理数据,使用geopandas和matp... 目录一、所需库的安装二、数据准备三、绘制土地利用和土地覆盖类型图四、代码解释五、其他可视化形式1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2