Vue2（十三）：路由

news2024/11/21 2:30:24

一、路由的简介

vue-rooter：是vue的一个插件库，专门用来实现SPA应用

1.对SPA应用的理解

1、单页 Web 应用（single page web application，SPA）。
2、整个应用只有一个完整的页面 index.html。
3、点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4、数据需要通过 ajax 请求获取。

在这里插入图片描述

2.什么是路由？

1、路由就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

2、key 为路径, value 可能是 function 或 component组件

3、vue 的一个插件库（vue-router），专门用来实现 SPA 应用

3.路由的分类

（1）前端路由

1、key是路径，value是组件component，用于展示页面内容。
2、工作过程：当浏览器的路径改变时, 对应的组件就会显示。

在这里插入图片描述

（2）后端路由

1、key是路径，value 是 function, 用于处理客户端提交的请求。(node.js)
2、工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

二、路由的基本使用

Vue2安装vue-router，命令：npm i vue-router@3
Vue3安装vue-router，命令：npm i vue-router

1.编写路由配置项

路径：src/router/index.js，该文件专门用于创建整个应用的路由器
这里要注意配置项里是routes:[]噢

//引入vue-router
import VueRouter from 'vue-router';

//引入组件
import Home from '../components/Home.vue';
import About from '../components/About.vue';

//创建并导出一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        }
    ]
});

2.main.js引入配置项并使用插件

这里和vuex不一样的是，使用插件不用在引入配置项（import router from './router/index'）之后，Vue.use(VueRouter);直接写在main.js里就欧了

// 引入Vue
import Vue from 'vue';
// 引入App
import App from './App.vue';
Vue.config.productionTip = false;

//引入路由器
import router from './router/index'  //<=================

//引入并使用VueRouter
import VueRouter from 'vue-router';//<===============
Vue.use(VueRouter);//<===============

// 创建一个Vue实例
new Vue({
    el: '#app',
    render: h => h(App),
    router: router//<===============
});

3.实现路由切换

使用<router-link></router-link>标签实现路由的切换 ，to=“/xxx”是展示的路径， active-class是当你点击这个的时候可展示的效果（高亮样式）

  <!-- 利用a标签实现页面的跳转,模拟路由切换 -->
  <!-- <a class="list-group-item active" href="./about.html">About</a>
  <a class="list-group-item" href="./home.html">Home</a> -->

    <!-- Vue中借助router-link标签实现路由的切换 -->
   <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
   <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

4.指定展示的位置

使用这个标签决定组件展示的位置

<router-view></router-view>

5.几个注意点

1、路由组件通常存放在src/pages文件夹，一般组件通常存放在src/components文件夹。一般组件就按我们之前用法那么用，路由组件的话就是靠<router-link></router-link>标签关联上index.js里配置的路由规则，然后由<router-view></router-view>放到指定位置。

2、通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。所以切换的时候，路由组件一直是 其他的销毁-当前的挂载 => 其他的销毁-当前的挂载 =>. … …

3、每个组件都有自己的$route属性，里面存储着自己的路由信息。

4、整个应用只有一个router，可以通过组件的$router属性获取到

在这里插入图片描述

三、嵌套（多级）路由

1.先创建好子组件

路由组件创建在pages中，创建News.vue和Message.vue

2.children配置项

路由套娃的话，首先要配置路由规则，使用children配置项：

//index.js：该文件专门用于创建整个应用的路由器
//引入vue-router
import VueRouter from 'vue-router';

//引入组件
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import Message from '../pages/Message.vue';
import News from '../pages/News.vue';

//创建一个路由器
const router = new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [//通过children配置子级路由
                {
                    path: 'message',  //二级路由不加斜杠......
                    component: Message
                },
                {
                    path: 'news',  //但是模板写的时候要/home/news
                    component: News
                }
            ]
        },

    ]
});
export default router;

3.模板上写路由跳转

要写完整路径而且加斜杠，例如：

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

App.vue是不变的，由于套娃是套在home里，所以要写在Home,vue中

在这里插入图片描述

四、路由的query参数

query参数是在组件的$route上的一个嘎达，可以用来接收数据，类似的还有params参数，在后面第六部分

1.传参的方式

（1）第一种方式：:to中使用字符串拼接或者模板字符串，直接写在要转到的路由路径后面，使用?连接，&拼接
（2）第二种方式：:to中使用对象的形式传参（推荐使用）

<ul>
    <li v-for="m in messageList" :key="m.id">
        <!-- 1.跳转路由并携带query参数,to的字符串写法
            这个地方体会到了模板字符串真的很方便 -->
       <router-link :to="`/home/message/msgdetail?id=${m.id}&title=${m.title}`">
           {{ m.title }}
       </router-link> 

        <!-- 2.跳转路由并携带query参数,to的对象写法 -->
        <router-link :to="{
            path: '/home/message/msgdetail',
            query: {
                id: m.id,
                title: m.title
            }
        }">
            {{ m.title }}
        </router-link>
    </li>
    <div>
        <hr>
        <router-view></router-view>
    </div>
</ul>

2.接收参数的方式

可以看下$route身上的东西（当点击消息2时）

在这里插入图片描述

所以去对应组件的模板中，使用$route.query来接收

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

3.案例

在以上案例的基础上继续实现点击Message中的内容在下面显示对应的数据

在这里插入图片描述

（1）配置三级路由

首先建立路由组件msgDetail.vue，然后去配置三级路由

在这里插入图片描述

（2）设置路由跳转

在Message组件中先把路由跳转标签做好，使用v-for生成路由标签<router-link>，然后点击能够显示对应路径下的组件，并配置好<router-view></router-view>目标。

在这里插入图片描述

（3）路由跳转并传参

建议使用第二种方式

在这里插入图片描述

（4）目标组件接收参数

传的时候都会传到目标组件的$route.query身上

在这里插入图片描述

五、命名路由

作用：可以简化路由的跳转。
使用：先命名，使用name属性，然后简化后可以直接通过名字跳转，比较方便。
注意：传参时字符串写法没法这么用

在这里插入图片描述

<!--简化前，需要写完整的路径 -->
<router-link to="/home/message/msgdetail">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'xiangqing'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'xiangqing',
		// 简化前：path:'/home/message/msgdetail',
		query:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>

六、路由的params参数

其实呢套娃时传数据不只可以用query参数，也可以用params参数，params也是$route上的玩意儿

1.占位符声明

这里要注意，占位符的名字要和传的params参数的属性名一致，否则url会不显示噢

在这里插入图片描述

2.传参：两种方式

<!--1.跳转路由并携带params参数,to的字符串写法-->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">
	{{ m.title }}
</router-link>

注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

   <!-- 2.跳转路由并携带params参数,to的对象写法 -->
    <router-link :to="{
        // path: '/home/message/detail',
        name: 'xiangqing',  //params的话只能写name,不能写path
        params: {
            id: m.id,
            title: m.title
        }
    }">
        {{ m.title }}
    </router-link>

3.接收参数

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

七、路由的props配置

作用：让路由组件更方便的收到参数

1.写法1：死数据

值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
缺点：这样值是死的

在这里插入图片描述

2.写法2：props:true

值为布尔值，若布尔值为真，就会把该路由组件收到的params参数，以props的形式传给Detail组件
缺点：只能传params参数的，query参数不能用这个

3.写法3：函数

props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件，这个是最常用的，函数会受到参数，这个参数就是组件身上的$route，我们可以通过它来获取query或者params里面的东西，然后传过去

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Hutool工具包

Hutool工具包

下载jar包网址 hutool-all-5.3.2.jar下载及Maven、Gradle引入代码&#xff0c;pom文件及包内class -时代Java (nowjava.com) maven导入 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.2&l…
阅读更多...
PHP后台+基于微信小程序外卖点餐系统毕业设计源代码作品和开题报告

PHP后台+基于微信小程序外卖点餐系统毕业设计源代码作品和开题报告

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…
阅读更多...
Ansible学习之ansible-pull命令

Ansible学习之ansible-pull命令

想要知道ansible-pull是用来做什么的&#xff0c;就需要了解Ansible的工作模&#xff0c;Ansible的工作模式有两种&#xff1a; push模式 push推送&#xff0c;这是Ansible的默认模式&#xff0c;在主控机上编排好playbook文件&#xff0c;push到远程主机上来执行。pull模式 p…
阅读更多...
一文搞懂CP-ABE，基于访问控制树的BSW方案原理分析与源码实现【基于C++、PBC库】

一文搞懂CP-ABE，基于访问控制树的BSW方案原理分析与源码实现【基于C++、PBC库】

文章目录 一. 概述1.1 CP-ABE基础介绍1.2 访问控制树与BSW方案原理1.2.1 系统模型与角色1.2.2 主要算法1.2.3 访问结构与访问树1.2.4 数学基础 二. 具体算法流程2.1 Setup&#xff08;初始化&#xff09;2.2 KeyGen&#xff08;密钥生成&#xff09;2.3 Encrypt&#xff08;加密…
阅读更多...
Typora---进度条（1）

Typora---进度条（1）

本系列专门介绍关于typora中用到的小玩意。&#xff08;哈哈哈哈哈哈&#xff09; 本帖子讲述关于 进度条 的事情。 在typora中通过下面的语句可以显示出一个进度条&#xff1a; ![95% done](https://markdone.org/progress//95.png)通过更改上面语句中的数字可以展示不同的进…
阅读更多...
local minima 的问题如何解决

local minima 的问题如何解决

&#x1f680; 在初始神经网络那一节&#xff08;链接如下&#xff1a;初识机器学习&#xff09;是遇到了两个问题&#xff0c;第一个是在求解函数未知参数数时会遇到local minima的问题&#xff0c;在哪里我们并没有过多解释&#xff0c;就是说一般遇不到并且很好解决&#xf…
阅读更多...
合并两个有序数组（c语言）

合并两个有序数组（c语言）

1.//给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 //注意&#xff1a;最终&#xff0c;合并后数…
阅读更多...
Unity 2D RPG Kit 学习笔记

Unity 2D RPG Kit 学习笔记

学习资料&#xff1a; B站教学视频&#xff1a;https://www.bilibili.com/video/BV1dC4y1o7A5?p1&vd_source707ec8983cc32e6e065d5496a7f79ee6 2D RPG Kit Documentation.pdf文档 1、2D RPG Kit Documentation文档 1.1、Scenes/TitleScreen 开始菜单工程 1.2、https://it…
阅读更多...
32、Qt读写csv文件

32、Qt读写csv文件

一、写入 QString fileName QFileDialog::getSaveFileName(this, "写入", "/untitled.csv", tr("Files (*.csv)"));if(fileName.isEmpty()){QMessageBox::warning(this, "提示", "文件名不能为空", QMessageBox::Ok);retur…
阅读更多...
探索分布式IO模块的介质冗余：赋能工业自动化的稳健之心

探索分布式IO模块的介质冗余：赋能工业自动化的稳健之心

在日新月异的工业自动化领域&#xff0c;每一个细微环节的稳定性都直接关系到生产线的效率与安全。随着智能制造的深入发展&#xff0c;分布式IO&#xff08;Input/Output&#xff09;模块作为连接现场设备与控制系统的关键桥梁&#xff0c;其重要性日益凸显。我们自主研发的带…
阅读更多...
网络原理-传输层UDP

网络原理-传输层UDP

上集回顾&#xff1a; 上一篇博客中讲述了应用层如何自定义协议&#xff1a;确定传输信息&#xff0c;确定数据格式 应用层也有一些现成的协议&#xff1a;HTTP协议 这一篇博客中来讲述传输层协议 传输层 socket api都是传输层协议提供的&#xff08;操作系统内核实现的了…
阅读更多...
MBTI人格测试项目（uni-app微信小程序 + SpringBoot）

MBTI人格测试项目（uni-app微信小程序 + SpringBoot）

目录 项目概述 测试 & 计分方式说明 页面展示 开发日志文档 素材&#xff1a;题库和人格分析 Gitee源码地址 项目概述 1.通过回答70道不同类型的题目&#xff0c;推算出MBTI人格类型&#xff0c;并给出此人格类型的解析。 2.使用uni-app编写微信小程序。 3.前端使…
阅读更多...
车辆重识别（2021ICML改进的去噪扩散概率模型）论文阅读2024/9/29

车辆重识别（2021ICML改进的去噪扩散概率模型）论文阅读2024/9/29

所谓改进的去噪扩散概率模型主要改进在哪些方面&#xff1a; ①对数似然值的改进 通过对噪声的那个方差和T进行调参&#xff0c;来实现改进。 ②学习 这个参数也就是后验概率的方差。通过数据分析&#xff0c;发现在T非常大的情况下对样本质量几乎没有影响&#xff0c;也就是说…
阅读更多...
Keil安装简易教程

Keil安装简易教程

1、安装MDK538a.exe 2、一直点下一步&#xff0c;默认安装即可。安装完成依次点击进行注册 3、利用Keygen进行License注册 4、Pack Installer 下载包&#xff0c;可在线下&#xff0c;可自行下 5、下载完可正常打开自己的工程项目 6、解压文件到Keil安装路径下C:\Keil_MDK\ARM…
阅读更多...
如何利用多线程提高计算密集型任务的性能

如何利用多线程提高计算密集型任务的性能

文章目录 摘要引言基本概念和原理判断是否适合使用多线程多线程编程中的关键问题设计和实现高效的多线程示例代码QA环节总结未来展望参考资料 摘要 多线程编程可以充分利用多核处理器的计算能力&#xff0c;从而显著提高计算密集型任务的性能。本篇文章将介绍多线程编程的基本…
阅读更多...
基于STM32的智能照明系统

基于STM32的智能照明系统

目录 引言项目背景环境准备 硬件准备软件安装与配置系统设计 系统架构关键技术代码示例 光照传感器数据采集照明控制实现自动亮度调节与手动控制应用场景结论 1. 引言 智能照明系统通过传感器实时监测环境光照度&#xff0c;并根据光线强度自动调整灯光亮度&#xff0c;达到…
阅读更多...
【Xcode Command Line Tools】安装指南

【Xcode Command Line Tools】安装指南

安装指令 xcode-select --install安装 完成安装 验证 $ xcode-select -p /Library/Developer/CommandLineTools
阅读更多...
【C++】透过STL源代码深度剖析vector的底层

【C++】透过STL源代码深度剖析vector的底层

✨ Blog’s 主页: 白乐天_ξ( ✿&#xff1e;◡❛) &#x1f308; 个人Motto&#xff1a;他强任他强&#xff0c;清风拂山冈&#xff01; &#x1f525; 所属专栏&#xff1a;C深入学习笔记 &#x1f4ab; 欢迎来到我的学习笔记&#xff01; 参考博客&#xff1a;【C】透过STL源…
阅读更多...
Python画笔案例-071 绘制闪闪的红星

Python画笔案例-071 绘制闪闪的红星

1、绘制通闪闪的红星 通过 python 的turtle 库绘制 闪闪的红星，如下图： 2、实现代码 绘制闪闪的红星，以下为实现代码： """闪闪的红星.py """ import time import turtledef xsleep(n):"""防
阅读更多...
Elasticsearch 使用误区之六——富文本内容写入前不清洗

Elasticsearch 使用误区之六——富文本内容写入前不清洗

0、引言 在很多应用场景中&#xff0c;我们会将富文本内容&#xff08;如 HTML 格式的网页内容&#xff09;存储到 Elasticsearch 中&#xff0c;以实现全文检索。 然而&#xff0c;在实际使用过程中&#xff0c;我们可能会遇到一些问题&#xff0c;比如在检索时&#xff0c;HT…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023