Web前端 ---- 【Vue】Vue路由传参(query和params)

目录

前言

为什么用路由

路由route和路由器router

Vue中路由的工作原理

安装配置vue-router

使用VueRouter

多级路由

路由传参

query传参

params传参


前言

本文介绍路由相关知识路由传参

为什么用路由

为了单页面应用开发,只更换组件,不频繁刷新页面。同时也更好维护,开发效率更高,代码利用率也更高。

路由route和路由器router

每一个路由都是由key-value对组成的,也就是路径和组件对应的关系,而这组对应的关系就叫做路由

路由器是管理路由的,本质就是管理多组对应关系

路由器会不停的监视路径,只要路径发生了变化,就会去自己管理的路由中去找到对应的路由,完成路由的切换(key(路径)发生了变化,去找变化了后的key对应的value(组件))

Vue中路由的工作原理

当我们点击触发事件更改路径,路由器监视到路径发生改变,立马在自己管理的路由中找到对应关系的组件,从而完成切换

安装配置vue-router

npm i vue-router@3

(vue2安装vue-router3,vue3安装vue-router4)

在main.js中配置vue-router

安装好以后在main.js中导入

全局注册使用

此时vue实例就会多出一个router配置项

在src中创建一个文件夹,router

在router中新建index.js文件(管理配置的route路由对象存放)

将该文件导出

在main.js文件中导入

将导入的路由对象放在router配置项中

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import Vuerouter from 'vue-router'

Vue.use(Vuerouter)

import router from './router'

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

使用VueRouter

在router文件夹下的index.js文件中

导入VueRouter

创建路由器对象

在路由器对象中都是路由对象

每一个对象都有

path:''路径

component:组件

导出路由器对象

// 导入vue-router
import VueRouter from "vue-router";

// 创建路由器对象,在里面配置路由对象
const router = new VueRouter({
    // 路由对象
    routes:[
        // 这就是一个路由
        {
            // 路径
            path:'',
            // 路径对应的组件
            component:''
        }
    ]
})

// 导出路由器对象
export default router

使用VueRouer时,不能使用a超链接标签

vue官方提供的

<router-link to="路径"></rouer-link>

以及路由视图

路径对应的组件展示的地方

<router-view></router-view>

例:

将创建好的两个组件导入router路由器中,配置好路径

当点击路径后就会在路由视图中展示对应的组件

多级路由

在以上案例基础上

创建两个组件

将两个组件导入router中

在router的index.js文件中

只需要在配置项中增加一个children配置项即可

注意,在children中的path前面不要加 /

在children配置项中一样也是path路径和component组件

在上一级组件中

路由传参

query传参

query传参分为普通传参和对象传参

字符串拼接方式传参:

以上面的案例为例

使用?key=value&key2=value形式传递参数

创建一个city组件,组件中的内容是动态的,根据传递的不同参数决定

在mounted函数中打印$route.query

直接使用插值语法动态渲染

优化以上代码,在路径中直接写参数比较麻烦

这种方法为字符串拼接方式

对象形式传参:

在to后面跟{ }

path:'组件路径',

query:{ 传递的参数 }

params传参

字符串拼接方式

直接在to后面跟路径以及参数用/分隔

在router中的index.js文件中

需要在路径后面加上

path:'路径/:参数名/:参数名 '

的形式

渲染时

$route.params

在mounted钩子函数中打印

优化以上代码

对象形式传参

此时to后面不能使用path,要用name

name是在router的index.js文件中的路由对象中配置定义的

query传参代码

<template>
  <div class="city">
    <h2>市</h2>
   <ul>
    <li>
      <!-- 对象形式 -->
      <router-link :to="{
        path:'/anhui/city',
        query:{
          a1:aq[0],
          a2:aq[1],
          a3:aq[2],
          a4:aq[3],
        }
      }">安庆</router-link>
    </li>
    <!-- 字符串拼接形式 -->
    <li><router-link :to="`/anhui/city?a1=${hf[0]}&a2=${hf[1]}&a3=${hf[2]}&a4=${hf[3]}`">合肥</router-link></li>
    <li>阜阳</li>
    <li>亳州</li>
   </ul>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'heFei',
    data(){
      return {
        aq:['宿松','太湖','怀宁','潜山'],
        hf:['瑶海','蜀山','包河','庐阳']
      }
    }
}
</script>

params传参代码

<template>
  <div class="city">
    <h2>市</h2>
    <ul>
      <!-- 字符串拼接形式 -->
      <li>
       <router-link :to="`/jiangsu/city/${nj[0]}/${nj[1]}/${nj[2]}/${nj[3]}`">南京</router-link>
      </li>
      <li>
        <!-- 对象形式 -->
        <router-link :to="{
          name:'cz',
          params:{
            a1:cj[0],
            a2:cj[1],
            a3:cj[2],
            a4:cj[3],
          }
        }">常州</router-link>
      </li>
      <li>苏州</li>
      <li>无锡</li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'jiangSu',
    data(){
      return {
        nj:['玄武区','秦淮区','鼓楼区','浦口区'],
        cj:['天宁区','钟楼区','新北区','武进区']
      }
    }
}
</script>

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

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

相关文章

Postman接口测试工具使用

一、前言 在前后端分离开发时&#xff0c;后端工作人员完成系统接口开发后&#xff0c;需要与前端人员对接&#xff0c;测试调试接口&#xff0c;验证接口的正确性可用性。而这要求前端开发进度和后端进度保持基本一致&#xff0c;任何一方的进度跟不上&#xff0c;都无法及…

跨境电商如何利用跨境客服软件提升销售额

随着全球化的推进&#xff0c;跨境电商成为了许多企业拓展市场的重要途径。然而&#xff0c;跨境电商面临着语言、文化、时差等多种挑战&#xff0c;为了提供更好的客户服务并提升销售额&#xff0c;跨境电商需要利用跨境客服软件。本文将探讨跨境电商如何利用跨境客服软件来提…

《从入门到精通:AJAX基础知识解析,前端开发中利器》基础篇

目录 学习目标&#xff1a; 学习目录&#xff1a; 学习时间&#xff1a; 学习内容&#xff1a; 什么是 AJAX&#xff1f; 怎么用 AJAX &#xff1f; 认识 URL 协议 域名 资源路径 获取 - 新闻列表 URL 查询参数 axios&#xff0d;查询参数 常用请求方法和数据提…

数据库 02-03 补充 SQL的子查询(where,from),子查询作为集合来比较some,exists,all(某一个,存在,所有)

子查询&#xff1a; where字句的子查询&#xff1a; 通常用in关键字&#xff1a; 举个例子&#xff1a; in关键字&#xff1a; not in 关键字&#xff1a; in 也可以用于枚举集合&#xff1a; where中可以用子查询来作为集合来筛选元祖。 some&#xff0c;all的运算符号…

C语言:指向数组的指针和指向数组元素的指针

相关阅读 C语言https://blog.csdn.net/weixin_45791458/category_12423166.html?spm1001.2014.3001.5482 指向数组的指针和指向数组元素的指针常常被混淆&#xff0c;或者笼统地被称为数组指针&#xff0c;但它们之间是有差别的&#xff0c;本文就将对此进行讨论。 下面的代码…

<VR串流线方案> PICO 4 Pro VR串流线方案 Oculus Quest2 Link串流线方案

虚拟现实技术(英文名称&#xff1a;Virtual Reality&#xff0c;缩写为VR)&#xff0c;又称虚拟实境或灵境技术&#xff0c;是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术&#xff0c;其基本实现方式是以计算机技术为主&#xff0c;利用并…

Postman-脚本自动化及定时执行脚本(7)

一.postman脚本自动化&#xff08;从postman至Newman可以一键执行脚本并生成报告&#xff1a;&#xff09; Postman Newman 是一个 CLI&#xff08;命令行界面&#xff09;工具&#xff0c;可以使用它来运行 Postman 中的集合&#xff08;Collection&#xff09;和环境&#xf…

052:vue重新发布,软件热更新方面的一点经验示例

第052个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

C语言之动态内存管理

一、引言 当我们写了一段程序&#xff0c;创建了一个变量或者一个数组&#xff0c;这些操作都需要在内存中开辟出一块空间。但是我们过去的这些操作有一定的局限性&#xff1a;开辟的空间大小是固定的&#xff0c;并且数组在申明的时候&#xff0c;必须指定数组的长度&#xf…

DeepMind的最新研究:人类最后的自留地失守了?

AI对人类世界的学习能力&#xff0c;到目前为止仍然停留在语言层面。 喂给大模型语料——最初是维基百科和Reddit&#xff0c;后来扩展到音频、视觉图像甚至雷达和热图像——后者广义上说是换了种表达方式的语言。也因此有生成式AI的创业者认为&#xff0c;一个极度聪明的大语…

EasyRecovery2024苹果电脑mac破解版安装包下载

EasyRecovery是一款操作安全、价格便宜、用户自主操作的非破坏性的只读应用程序&#xff0c;它不会往源驱上写任何东西&#xff0c;也不会对源驱做任何改变。它支持从各种各样的存储介质恢复删除或者丢失的文件&#xff0c;其支持的媒体介质包括&#xff1a;硬盘驱动器、光驱、…

Pytorch的安装

Pytorch的安装 Pytorch的安装查看显卡信息CUDA兼容性安装说明开始安装常见异常安装CUDA Pytorch的安装 PyTorch的安装绝对是一个不是那么简单的过程&#xff0c;或多或少总是会出现一些奇奇怪怪的问题&#xff0c;这里分享记录一下PyTorch的安装心得。 查看显卡信息 没用显卡的…

Tomcat部署Activiti官方 流程设计器【数据库更换为Mysql !!!】

一、官网下载activiti6 解压后结构如下: database&#xff1a; 存放数据库对象相关脚本&#xff0c;包含不同的数据库脚本 libs&#xff1a; 包含activiti开发过程中需要用到的jar包和源码&#xff0c;不建议通过jar包直接引用&#xff0c;建议通过maven进行管理 wars&am…

模块一——双指针:202.快乐数

文章目录 题目描述简单证明补充知识算法原理代码实现 题目描述 题目链接&#xff1a;202.快乐数 为了方便叙述&#xff0c;将对于⼀个正整数&#xff0c;每⼀次将该数替换为它每个位置上的数字的平方和这⼀个操作记为x操作&#xff1b; 题目告诉我们&#xff0c;当我们不断重…

RHEL8_Linux使用podman管理容器

本章主要介绍使用 podman 管理容器 了解什么是容器&#xff0c;容器和镜像的关系安装和配置podman拉取和删除镜像给镜像打标签导出和导入镜像创建和删除镜像 1.了解容器及和镜像的关系 对于初学者来说&#xff0c;不太容易理解什么是容器&#xff0c;这里举一个例子。想象一下…

Leetcode69 x的平方根

x的平方根 题解1 袖珍计算器算法题解2 二分查找题解3 牛顿迭代 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 注意&#xff1a;不允许使用任何内置指数函数和算符&…

KubeKey 离线部署 KubeSphere v3.4.1 和 K8s v1.26 实战指南

作者&#xff1a;运维有术 前言 知识点 定级&#xff1a;入门级了解清单 (manifest) 和制品 (artifact) 的概念掌握 manifest 清单的编写方法根据 manifest 清单制作 artifactKubeKey 离线集群配置文件编写KubeKey 离线部署 HarborKubeKey 离线部署 KubeSphere 和 K8sKubeKey…

DBSCAN聚类算法学习笔记

DBSCAN聚类算法学习笔记 一些概念名词 MinPts&#xff1a;聚类在一起的点的最小数目&#xff0c;超过这一阈值才算是一个族群 核心点&#xff1a;邻域内数据点超过MinPts的点 边界点&#xff1a;落在核心点邻域内的点称为边界点 噪声点&#xff1a;既不是核心点也不是边界点的…

【Spring】01 Bean 介绍

文章目录 1. 定义2. 特性1&#xff09;可重用性2&#xff09;可配置性3&#xff09;可管理性 3. 生命周期1&#xff09;实例化2&#xff09;属性设置3&#xff09;初始化4&#xff09;使用5&#xff09;销毁 4. 配置方式1&#xff09;XML配置2&#xff09;注解配置3&#xff09…

docker-compose Install gitea

gitea 前言 Gitea 是一个轻量级的 DevOps 平台软件。从开发计划到产品成型的整个软件生命周期,他都能够高效而轻松的帮助团队和开发者。包括 Git 托管、代码审查、团队协作、软件包注册和 CI/CD。它与 GitHub、Bitbucket 和 GitLab 等比较类似。 Gitea 最初是从 Gogs 分支而来…
最新文章