Vue学习笔记-路由的基本使用

版本问题

vue2 要下载vue-router3
vue3 要下载vue-router4

使用步骤

  1. 安装vue-router,命令:npm i vue-router@版本号

  2. 在main.js中导入vue-router模块,并且使用vue-router插件

    ......
    //引入vue-router
    import VueRouter from 'vue-router'
    ......
    //应用插件
    Vue.use(VueRouter)
    
  3. 在src路径下创建router文件夹,并创建index.js文件,该文件用于配置路由规则

    //该文件用于创建整个文件的路由器
    import VueRouter from "vue-router";
    import AboutVue from "@/components/AboutVue";
    import HomeVue from "@/components/HomeVue";//创建一个路由器
    const router = new VueRouter({routes:[{path:'/about',/*路径*/component:AboutVue /*组件*/},{path:'/home',component:HomeVue}],
    })
    //导出
    export default router
    
  4. 实现组件切换,在需要路由切换的组件中编写如下内容(active-class类用于动态地为选中的标签添加样式)

    <router-link active-class="active" to="/about">About</router-link>
    <router-link active-class="active" to="/home">Home</router-link>
    
  5. 指定展示切换的组件的位置

    <!--指定组件的呈现位置-->
    <router-view></router-view>
    

几个注意点

  1. 路由组件(需要时常切换的组件)一般放在pages文件夹,一般组件(比较固定不动的组件)通常放在components文件夹
  2. 切换组件时,不需要的组件会被销毁,等再切换显示时再次挂载,当组件被销毁时,建议将绑定的资源释放(例如组件中绑定的自定义事件)
  3. 每个组件都有自己的$route属性,里面存储着自己的路由信息
  4. 每个组件共享一个$router属性,因为整个应用只有一个router管理路由规则

多级路由(嵌套路由)

  1. 配置(需要注意的是,多级路由下的path路径配置,不需要写斜杠)

     routes:[{path:'/about',component:AboutVue},{path:'/home',component:HomeVue,children:[{path:'news',/*二级路由不用写斜杠*/component:NewsVue},{path:'message',component:MessageVue}],}],
    
  2. 跳转:要写完整路径

    <router-link active-class="active" to="/home/news">News</router-link>
    <router-link active-class="active" to="/home/message">Message</router-link>
    

路由传递参数-query

  1. 父组件A向子组件B传递参数
    父组件A中核心代码
    【注】:`模板字符串`中可以嵌入 ${js代码}
 <ul><li v-for="message in messageList" :key="message.id"><!--跳转路由并携带query参数,to的字符串写法--><router-link :to="`/home/message/detail?id=${message.id}&title=${message.title}`">{{ message.title }}</router-link>&nbsp;&nbsp;<!--跳转路由并携带query参数,to的对象写法--><router-link :to="{path:'/home/message/detail',query:{id:message.id,title:message.title}}">{{ message.title }}</router-link></li>
</ul>

2.子组件B中接收数据
子组件中存在$route对象,该对象可用于路由参数接收

<ul><li>消息编号:{{ $route.query.id }}</li><li>消息标题:{{ $route.query.title }}</li>
</ul>

路由参数传递-params

  1. 路由配置,声明接收params参数

    {path:'/home',component:HomeVue,children:[{path:'news',/*二级路由不用写斜杠*/component:NewsVue},{path:'message',component:MessageVue,children:[{name:'detailName',path:'detail/:id/:title',/*使用占位符声明接收params参数*/component:DetailVue},]}],}
    
  2. 传递参数

    <ul><li v-for="message in messageList" :key="message.id"><!--跳转路由并携带params参数,to的字符串写法--><router-link :to="`/home/message/detail/${message.id}/${message.title}`">{{ message.title }}</router-link>&nbsp;&nbsp;<!--跳转路由并携带params参数,to的对象写法该方法to对象中不能写path属性,必须写name属性--><router-link :to="{name:'detailName',params:{id:message.id,title:message.title}}">{{ message.title }}</router-link></li>
    </ul>
    

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

  3. 接收参数

    <li>消息编号:{{ $route.params.id }}</li>
    <li>消息标题:{{ $route.params.title }}</li>
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/188543.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【你来了】舞台就是你的:深圳COC社区职言职语第2季劲爆来袭......

​ 职言职语第1季活动回顾 活动总结见&#xff1a;【活动总结】0723-COC深圳社区职言职语第1季活动总结之第1视角_架构师李肯-深圳城市开发者社区 (csdn.net) 活动介绍 &#x1f389;&#x1f465; 欢迎加入职言职语第2季活动&#xff01;与我们一起来探索职场的智慧和灵感&…

AntDB“超融合+流式实时数仓”——颠覆50年未变的数据库内核

流式处理引擎&#xff0c;颠覆50年未变的数据库内核 流式处理的概念 2001年9月11日&#xff0c;美国世贸大楼被袭击&#xff0c;美国国防部第一次将“主动预警”纳入国防的宏观战略规划。而IBM作为当时全球最大的IT公司&#xff0c;承担了大量基础支撑软件研发的任务。其中200…

【动态规划】LeetCode2552:优化了6版的1324模式

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 动态规划 本题其它解法 C前缀和算法的应用&#xff1a;统计上升四元组 类似题解法 包括题目及代码C二分查找算法&#xff1a;132 模式解法一枚举3C二分查找算法&am…

java数据结构(哈希表—HashMap)含LeetCode例题讲解

目录 1、HashMap的基本方法 1.1、基础方法&#xff08;增删改查&#xff09; 1.2、其他方法 2、HashMap的相关例题 2.1、题目介绍 2.2、解题 2.2.1、解题思路 2.2.2、解题图解 2.3、解题代码 1、HashMap的基本方法 HashMap 是一个散列表&#xff0c;它存储的内容是键…

【数据库】基于排序算法的去重,集合与包的并,差,交,连接操作实现原理,执行代价以及优化

基于两趟排序的其它操作 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏…

Jmeter工具+ant+jenkins实现持续集成

jmeterantjenkins持续集成 一、下载并配置jmeter 首先下载jmeter工具&#xff0c;并配置好环境变量&#xff1b;参考&#xff1a; jmeter默认保存的是.jtl格式的文件&#xff0c;要设置一下bin/jmeter.properties,文件内容&#xff0c;保存jmeter.save.saveservice.output_f…

Python for循环及用法详解

for-in 循环专门用于遍历范围、列表、元素和字典等可迭代对象包含的元素。 for-in 循环的语法格式如下 for 变量 in 字符串&#xff5c;范围&#xff5c;集合等&#xff1a;statements 对于上面的语法格式有以下两点说明&#xff1a; for-in 循环中的变量的值受 for-in 循环控…

分享86个清新唯美PPT,总有一款适合您

分享86个清新唯美PPT&#xff0c;总有一款适合您 86个清新唯美PPT下载链接&#xff1a;https://pan.baidu.com/s/1QEaXeWAekCbAWDD0iTgvMw?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整…

WEB渗透—反序列化(十)

Web渗透—反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩哔_…

如何解决SSL证书部署后未生效或网站显示不安全

本文介绍SSL证书部署后未生效或网站显示不安全的排查方法。 浏览器提示“您与此网站建立的连接不安全” 浏览器提示“无法访问此页面” 浏览器提示“这可能是因为站点使用过期或者不全的TLS安全设置” 浏览器提示“此页面上部分内容不安全&#xff08;例如图像&#xff09;”…

数据确权怎么理解?企业应该怎么做?

什么是数据确权&#xff1f; 所谓数据确权&#xff0c;就是确定数据的权利属性&#xff0c;主要包含两个层面&#xff1a;第一是确定数据的权利主体&#xff0c;即谁对数据享有权利。第二是确定权利的内容&#xff0c;即享有什么样的权利。 在数据生产、流通、使用等过程中&…

Linux系统:使用CloudDrive实现云盘本地挂载

此处以不使用Docker服务 系统&#xff1a; Ubuntu22.04 硬件信息&#xff1a; x86_64 1 安装CloudDrive CloudDrive下载地址 在服务器上安装fusemount3 sudo apt-get -y install fuse3下载对应版本的CloudDrive压缩包&#xff0c;我的机器为&#xff1a;clouddrive-2-linux-…

【Excel】WPS快速按某列查重数据

查重值 excel列几条数据肉眼可见&#xff0c;如何千万级别数据查验呢&#xff1f;平时很少用&#xff0c;记录一下: 先框选列要验证的数据&#xff0c;然后&#xff1a;开始->条件格式->突出显示单元格规则->重复值 效果

关于 React 如何自定义配置 HighCharts tooltip

前言 当我们结合 React 使用 highCharts 库时&#xff0c;存在一些特殊自定义的情况&#xff0c;比如针对 Tooltip 定制化样式。当然 highCharts 也提供了配置自定义 tooltip 的 formatter 方法&#xff0c;可以支持 html 元素。但是并不够灵活&#xff0c;对于配置复杂样式或…

C++(20):bind_front

C(11)&#xff1a;bind_c11 bind_风静如云的博客-CSDN博客 提供了方法来绑定函数参数的方法。 C20提供了bind_front用于简化这个绑定。 #include <iostream> #include <functional> using namespace std;void func1(int d1, int d2) {cout<<__func__<&l…

java元注解

一、注解 Annotation&#xff08;注解&#xff09;是 Java 提供的一种对元程序中元素关联信息和元数据&#xff08;metadata&#xff09;的途径和方法。 Annatation(注解)是一个接口&#xff0c;程序可以通过反射来获取指定程序中元素的 Annotation对象&#xff0c;然后通过该…

Docker下安装Redis

如果我们在Docker上直接拉取redis并运行镜像&#xff0c;当容器删除之后&#xff0c;redis容器里的数据不会被保存&#xff0c;所以我们在运行容器的时候&#xff0c;需要使用数据卷进行挂载&#xff0c;按照如下操作即可。 安装步骤 新建目录/opt/redis [rootlocalhost data…

[山东大学操作系统课程设计]实验2

0.写在前面 其实昨天就把这篇写完了&#xff0c;可是遇到了一些突发事件&#xff0c;暂时还没想好自己的出路在哪&#xff0c;争取这两天把课程设计的实验全都写完吧。。。。。我知道大家现在都很难过&#xff0c;生活上&#xff0c;学业上&#xff0c;事业上。。。。但是还是…

CentOS7根分区扩容之一

Centos默认根分区50G&#xff0c;很快接近100%&#xff0c;如果你的系统使用了全部磁盘&#xff0c;文件系统是xfs&#xff0c;根分区和/home都是逻辑卷&#xff0c;那么在没有额外的磁盘增加情况下&#xff0c;可以从/home卷中切分一部分空间增加到根分区空间。 1.由于xfs格式…

视频合并方法:掌握视频批量嵌套合并技巧,成为剪辑高手

在视频剪辑的过程中&#xff0c;我们经常需要将多个视频片段合并在一起。传统的视频合并方法往往需要大量的时间和精力&#xff0c;通过掌握批量嵌套合并技巧&#xff0c;可以更高效地完成这项任务&#xff0c;成为剪辑高手。本文讲解一种简单易学的视频合并方法&#xff0c;轻…