Vue2(十四):路由的使用及注意点、嵌套路由、路由的query和params参数、props配置

一、路由的简介

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、工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

二、路由基本使用

1.安装vue-router

Vue2安装vue-router,命令:npm i vue-router@3
Vue3安装vue-router,命令:npm i vue-router

2.src/router/index.js编写路由配置项

路径: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
        }
    ]
});

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

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
// 引入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

// 引入路由器
import router from './router/index'
// 引入并使用VueRouter
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//关闭Vue的生产提示
Vue.config.productionTip = false


//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

localhost:8080/#/说明路由使用成功 

4.实现路由切换

在App.vue中 使用 <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> -->

            <!-- 借助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>
            <!-- active-class实现点谁谁亮的高亮效果 -->

 5.指定展示的位置

<router-view></router-view> 

<!-- ????到底展示那个组件 -->
              <!-- 决定组件展示的位置 -->
              <router-view></router-view>

最后效果:

6.几个注意点

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

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

3、每个组件都有自己的$route属性,里面存储着自己的路由信息。
4、整个应用只有一个router,可以通过组件的$router属性获取到

三、嵌套路由(多级路由)

1.在pages中,创建News.vueMessage.vue

2.配置路由规则,使用children配置项 

router/index.js

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

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

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

 3.路由跳转

写在home.vue中,路径要写完整to="/home/news"

<ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/messages">Message</router-link>
        </li>
      </ul>
      <router-view></router-view>

四、路由的query参数

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

1.传参的方式

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

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

          <!-- to的对象写法 -->
          <router-link :to="{
            path:'/home/message/detail',
            query:{
              id:m.id,
              title:m.title
            },
          }">
          {{ m.title }}
        </router-link>

 2.接收参数的方式

可以看下$route身上的东西,有query携带的id title,使用$route.query来接收

pages/detail.vue 

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

<script>
export default {
    name:'Detail',
    mounted(){
        console.log(this.$route);
    }
}
</script>

3.案例

(1)配置三级路由

首先建立路由组件pages/Detail.vue,然后去配置三级路由,在引入

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

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

// 创建并导出一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

(2)设置路由跳转并传参

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

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

          <!-- to的对象写法 -->
          <router-link :to="{
            path:'/home/message/detail',
            query:{
              id:m.id,
              title:m.title
            },
          }">
          {{ m.title }}
        </router-link>

(3)目标组件接收参数

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

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

五、命名路由

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

<!-- to的对象写法 -->
          <router-link :to="{
            // path:'/home/message/detail',
            name:'xiangqing',
            query:{
              id:m.id,
              title:m.title
            },
          }">
          {{ m.title }}
        </router-link>

六、路由的params参数

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

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

2.传递参数

 

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

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

          <!-- to的对象写法 -->
          <!-- <router-link :to="{
            // path:'/home/message/detail',params不能用path
            name:'xiangqing',
            params:{
              id:m.id,
              title:m.title
            },
          }">
          {{ m.title }}
        </router-link> -->

3.接收参数

七、路由的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里面的东西,然后传过去

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CVE-2023-2928 DedeCMS 文件包含漏洞getshell 漏洞分析

DedeCMS&#xff08;也称为织梦CMS&#xff09;是一款基于PHPMySQL的开源内容管理系统。 在 DedeCMS 5.7.106 及之前的版本中发现一个漏洞。它已被宣布为关键。受此漏洞影响的是未知功能的文件uploads/dede/article_allowurl_edit.php。对参数 allurls 的操作会导致代码注入。…

近期整理的前端面试问题大集合【附带答案版】

目录 1、vue的双向绑定原理是什么&#xff1f;里面的关键点在哪里&#xff1f; 2、实现水平垂直居中的方式&#xff1f; 3、常用伪元素有哪一些&#xff1f; 4、移动端如何适配不同屏幕尺寸&#xff1f; 5、本地存储有哪一些&#xff1f;他们三者有什么区别&#xff1f; …

智慧乡村建设探索:数字乡村引领农村发展新方向

目录 一、智慧乡村建设的内涵与意义 二、数字乡村的发展现状 三、数字乡村引领农村发展的新方向 &#xff08;一&#xff09;推动农业现代化&#xff0c;提升农业生产效率 &#xff08;二&#xff09;培育农村新业态&#xff0c;促进农村产业升级 &#xff08;三&#xf…

陶瓷、高频、普通PCB板材有什么不同?

在电子制造中&#xff0c;印刷电路板&#xff08;PCB&#xff09;板材的选择很重要&#xff0c;将直接决定电路板的性能、成本和适用领域&#xff0c;按照市场上应用最广泛的PCB板材&#xff0c;可分为陶瓷、高频及普通&#xff0c;它们三个有什么不同&#xff1f; 1、材质陶瓷…

COTR 网络(图像匹配)

COTR 网络&#xff08;图像匹配&#xff09; 摘要Abstract1. COTR网络1.1 文献摘要1.2 研究背景1.3 COTR网络架构1.4 创新点1.5 实验1.5.1 数据集1.5.2 具体实施1.5.3 实验数据 1.6 结论 2. COTR模型代码实现总结 摘要 本周学习了图像匹配方向的COTR网络模型&#xff0c;COTR通…

记录一次hss不能防护主机的问题

场景&#xff1a;hss的控制台显示不在防护中&#xff0c;其他云主机并没有这个情况。 故障发生的时间是昨天下午15点半左右&#xff0c;运维同事做了重启网卡的操作。service network restart 排查分析&#xff1a; 于是仔细的查看日志&#xff0c;发现报错如下&#xff1a…

openstack中windows虚拟机时间显示异常问题处理

文章目录 一、问题描述二、元数据信息总结 一、问题描述 openstack创建出windows虚拟机的时候&#xff0c;发现时间和当前时间相差8小时&#xff0c;用起来很难受。 参考&#xff1a;https://www.cnblogs.com/hraa0101/p/11365238.html 二、元数据信息 通过设置镜像的元数据…

边缘计算采集网关如何助力制造企业解决数采问题-天拓四方

一、企业背景 某大型制造企业&#xff0c;位于国内某经济发达的工业园区内&#xff0c;拥有多个生产线和智能化设备&#xff0c;致力于提高生产效率、降低运营成本。随着企业规模的扩大和生产自动化的推进&#xff0c;该企业面临着海量数据处理、实时响应和网络安全等多重挑战…

vmware 中的Ubuntu系统虚拟机忘记root密码强制重置操作

忘记密码情况下&#xff0c;vmware虚拟机重置Ubuntu的root密码 在企业使用的vmware ESXI中重置Ubuntu系统root密码 1-本地电脑安装个人版的vmware workstation&#xff0c;目的&#xff1a;vmware ESXI自带的远程控制台无法输入指定的键盘按键&#xff0c;需要借助外部的远程辅…

spring.rabbitmq.listener.simple.default-requeue-rejected = false 和放入死信队列的区别

目录 一、场景 二、使用 spring.rabbitmq.listener.simple.default-requeue-rejected false 2.1 特点 三、 放入死信队列 四、两种区别 一、场景 当我们使用RabbitMq的时候&#xff0c;我们如果业务中有异常&#xff0c;很有可能造成死循环&#xff0c;因为 在RabbitMQ和…

AI提速 OpenAI 新模型GPT-5今年上线?

这两天&#xff0c;有关OpenAI新模型 GPT-5的消息又多了起来。有知情人士称&#xff0c;OpenAI将在今年年中的某个时候发布GPT-5&#xff0c;很可能是在今年夏天期间。OpenAI CEO 萨姆奥特曼在一次播客采访中透露“GPT-5的智能水平得到提升”。 有趣的是&#xff0c;播客的主理…

Spring Security——08,自定义失败处理

自定义失败处理 一、自定义实现类1.1 实现AccessDeniedHandler1.2 实现AuthenticationEntryPoint 二、配置SpringSecurity三、测试3.1 认证失败3.2 权限不足 一键三连有没有捏~~ 我们还希望在认证失败或者是授权失败的情况下也能和我们的接口一样返回相同结构的json&#xff0c…

AI智慧医疗:探索机器学习在医疗保健中的应用与进展

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向的学习指导…

MySQL学习笔记------事务

事务 事务是一组操作的集合&#xff0c;他是一个不可分割的单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败 事务操作 create table account(id int comment ID,name varchar(10) …

Java 面向对象基础篇【接口、抽象类、实现类之间的关系】

目录 接口&#xff08;Interface&#xff09;&#xff1a;抽象类&#xff08;Abstract Class&#xff09;&#xff1a;实现类&#xff08;Concrete Class&#xff09;&#xff1a; 接口、抽象类、实现类之间的关系类&#xff08;Class&#xff09;&#xff1a; 接口、抽象类、类…

学习嵌入式可以胜任哪一些行业?

嵌入式技术之应用范围甚广&#xff0c;其多见于机器人、无人机、医疗器械以及军工等领域&#xff0c;为学习者带来诸多广泛之职业机遇。嵌入式工程师于此诸领域中扮演关键之角色&#xff0c;负责解决硬件平台适配等诸问题&#xff0c;以为创新提供支撑之力。 虽嵌入式技术与日…

[C++][算法基础]最大异或对(Trie树)

在给定的 N 个整数 &#xff0c;...... 中选出两个进行 xor&#xff08;异或&#xff09;运算&#xff0c;得到的结果最大是多少&#xff1f; 输入格式 第一行输入一个整数 N。 第二行输入 N 个整数 ~ 。 输出格式 输出一个整数表示答案。 数据范围 1≤N≤, 0≤< 输…

lua学习笔记12(多脚本和大G表)

print("*****************************多脚本执行*******************************") print("*****************************全局变量和本地变量*******************************") --全局变量 a114514 b"你干嘛&#xff0c;哎呦" for i1,2 doc&…

【Spring Security】2.实现最简单的身份验证

文章目录 一、找到官网的身份认证&#xff08;authentication&#xff09;示例代码二、实现最简单的身份验证1、创建Spring Boot项目2、创建IndexController3、创建index.html4、启动项目测试Controller 三、{/logout}的作用四、页面样式无法加载的问题 一、找到官网的身份认证…

【MATLAB源码-第36期】matlab基于BD,SVD,ZF,MMSE,MF,SLNR预编码的MIMO系统误码率分析。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. MIMO (多输入多输出)&#xff1a;这是一个无线通信系统中使用的技术&#xff0c;其中有多个发送和接收天线。通过同时发送和接收多个数据流&#xff0c;MIMO可以增加数据速率和系统容量&#xff0c;同时提高信号的可靠性。…