Vue-router快速入门 是什么 如何跳转 如何传值的问题

news2025/11/4 3:55:36

3.1 Vue-router是什么

Vue-router:Vue.js 的官方路由为 Vue.js 提供富有表现力、可配置的、方便的路由

官网：https://router.vuejs.org/zh/

作用：

1.实现vue页面(组件)的跳转

2.可以在跳转的时候携带参数

3.2 Vue3使用Vue-router(静态路由)

在这里插入图片描述

基于Vue-router实现页面跳转

静态路由步骤：
1.安装vue-router
2.实现一个vue3的页面编写
3.在src创建文件router，创建路由的js文件 index.js
4.在main.js中实现路由的配置
5.在app.vue主页 使用路由

静态路由具体步骤：
1.安装vue-router
npm install vue-router@4
2.实现一个vue3的页面编写
views-study.vue

<!-- 标签 画中画 -->
<template>
  <div>
    <h1>学习vue3</h1>
    <div>
      <h1>内容：{{ str1 }}</h1>
      <button style="font-size: 30px;color: red" @click="show">查看内容</button>
    </div>
  </div>
</template>

<!-- Vue3的写法 setup -->
<script setup>
//导入
import {ref} from "vue";

//定义变量
const str1=ref("醒醒...")
const show = () => {
  alert(str1.value)
}
</script>

<style scoped>

</style>

3.在src创建路由的js文件
router-index.js

import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'


const routes = [
    // 2.注册 设置对应vue组件的路径名
    { path: '/study', component: study }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}

4.在main.js中实现路由的配置
man.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//导入路由
import { createRouter } from "./router/index.js"
//配置路由
createApp(App).use(createRouter()).mount('#app')

5.在app.vue主页 使用路由

<template>
  <div>
    <!-- 静态路由 to 对应路径 -->
    <router-link to="/study">静态路由</router-link>
  </div>
  <div>
    <router-view/>
  </div>
</template>

<!--js代码 vue3的语法-->
<script setup>
</script>

<!-- css样式 美化 -->
<style scoped>

</style>

3.3 Vue-router实现跳转的方式

vue-router实现页面跳转有2种方式：

必须在页面使用：router-view(一般写在app.vue页面)

第一种：声明式路由（静态路由）

直接在template里面使用router-link标签 通过 to属性实现页面跳转

  <div>
<!--    静态路由 to 对应路径-->
    <router-link to="/study">静态路由</router-link>
  </div>

第二种：编程式路由（动态路由）

实现步骤

  1. views-learn.vue
  2. router-index.js
  3. App.vue

实现具体步骤

  1. views包-learn.vue
<template>
<div>
  <h1>动态路由</h1>
  <button @click="tz">点击跳转</button>
</div>
</template>

<!-- Vue3的写法 setup -->
<script setup>
//导入
import {ref} from "vue";
import { useRouter } from 'vue-router'
// 声明变量
const router=useRouter()
const tz = () => {
  //基于路由 实现页面跳转 动态路由
  router.push("/study");
}
</script>

<style scoped>

</style>
  1. router包-index.js
import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'
import learn from "../views/learn.vue"


const routes = [
    // 2.注册 设置对应vue组件的路径名
    { path: '/study', component: study },
    { path: '/learn', component: learn }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}
  1. App.vue
<template>
  <div>
    <!-- 静态路由 to 对应路径 -->
    <router-link to="/study">静态路由</router-link>
    <router-link to="/learn">演示动态路由</router-link>
  </div>
  <div>
    <router-view/>
  </div>
</template>

<!--js代码 vue3的语法-->
<script setup>
</script>

<!-- css样式 美化 -->
<style scoped>

</style>

3.4 Vue-router实现传值

Vue-router在跳转页面的时候，也可以携带数据过去

有2种方式：
第一种：path(路径)+query(查询参数)
传递：router.push({ path: ‘/study’, query: { q1: msg1.value } })

第二种：name(名称)+params(参数)

具体实现:
第一种：path(路径)+query(查询参数)
步骤：
1.views/query.vue
2.router/index.js
3.App.vue
4.views/study.vue 获取

具体步骤：
1.views/query.vue

<template>
<div>
  <h1>通过路径和查询参数进行传递</h1>
  <input v-model="msg1">
  <button @click="tz1">跳转参数</button>
</div>
</template>

<script setup>
import {ref} from "vue";
//带r的是用来跳转的
import {useRouter} from "vue-router";
const router=useRouter();
const msg1=ref("");
const tz1=()=>{
  //路由 跳转页面 传递参数 path+query
  //path:'/study' 上哪个里面跳, q1 参数名
  router.push({ path:'/study',query: { q1: msg1.value } });
}
</script>

<style scoped>

</style>

2.router/index.js

import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'
import learn from "../views/learn.vue"
import query from "../views/query.vue";


const routes = [
    // 2.注册 设置对应vue组件的路径名
    { path: '/study', component: study },
    { path: '/learn', component: learn },
    { path: '/query', component: query }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}

在这里插入图片描述

3.App.vue

<template>
  <div>
    <!-- 静态路由 to 对应路径 -->
    <router-link to="/study">静态路由</router-link>
    <router-link to="/learn">演示动态路由</router-link>
    <router-link to="/query">路径传参</router-link>
  </div>
  <div>
    <router-view/>
  </div>
</template>

<!--js代码 vue3的语法-->
<script setup>
</script>

<!-- css样式 美化 -->
<style scoped>

</style>

在这里插入图片描述

4.views/study.vue 获取

<!-- 标签 画中画 -->
<template>
  <div>
    <h1>学习vue3</h1>
    <div>
      <h1>内容：{{ str1 }}</h1>
      <button style="font-size: 30px;color: red" @click="show">查看内容</button>

      <h1>接收路由携带数据</h1>
      <h1>query:{{route.query.q1}}</h1>
    </div>
  </div>
</template>

<!-- Vue3的写法 setup -->
<script setup>
//导入
import {ref} from "vue";
//取值 用不带r的
import {useRoute} from "vue-router";

const route=useRoute();

//定义变量
const str1=ref("醒醒...")
const show = () => {
  alert(str1.value)
}
</script>

<style scoped>

</style>

在这里插入图片描述
study.vue 详细 见 静态路由篇
源码项目见：Vue3Study01_XQ/vue02

第二种：name(名称)+params(参数)

步骤：
1.views/params 传数据
2.router/index.js
3.App.vue
4.views/study.vue 按照名称接接收数据

具体实现
1.views/params 传数据

<template>
<div>
  <label>要传的数据:</label><input v-model="msg2">
  <button @click="tz2">跳转传值通过参数</button>
</div>
</template>

<script setup>
import {ref} from "vue";
// 传值用带r的useRouter
import {useRouter} from "vue-router";

const router=useRouter();

const msg2=ref("")

const tz2 = () => {
  router.push({ name: 'study', params: { p1:msg2.value } })
}
</script>

<style scoped>

</style>

2.router/index.js

import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'
import learn from "../views/learn.vue"
import query from "../views/query.vue";
import params from "../views/params.vue"


const routes = [
    // 2.注册 设置对应vue组件的路径名
    //通过name+params传值的需要，需要再路径后面:参数名
    { path: '/study/:p1',name:'study', component: study },
    { path: '/learn', component: learn },
    { path: '/query', component: query },
    { path: '/params',name:'params', component: params }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}

在这里插入图片描述
3.App.vue

<template>
  <div>
    <!-- 静态路由 to 对应路径 -->
    <router-link to="/study">静态路由</router-link>|
    <router-link to="/learn">演示动态路由</router-link>|
    <router-link to="/query">路径传参</router-link>|
    <router-link to="/params">名称传参</router-link>|
  </div>
  <div>
    <router-view/>
  </div>
</template>

<!--js代码 vue3的语法-->
<script setup>
</script>

<!-- css样式 美化 -->
<style scoped>

</style>

在这里插入图片描述

4.views/study.vue 按照名称接接收数据
在这里插入图片描述

路径传参和名称传参注意点：
加上名称传参之后需要在views/query.vue加上
在这里插入图片描述

<template>
<div>
  <h1>通过路径和查询参数进行传递</h1>
  <input v-model="msg1">
  <button @click="tz1">跳转参数</button>
</div>
</template>

<script setup>
import {ref} from "vue";
//带r的是用来跳转的
import {useRouter} from "vue-router";
const router=useRouter();
const msg1=ref("");
const tz1=()=>{
  //路由 跳转页面 传递参数 path+query
  //path:'/study' 上哪个里面跳, q1 参数名
  router.push({ path:'/study/1',query: { q1: msg1.value } });
}
</script>

<style scoped>

</style>

还有index.js 注意
在这里插入图片描述

import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'
import learn from "../views/learn.vue"
import query from "../views/query.vue";
import params from "../views/params.vue"


const routes = [
    // 2.注册 设置对应vue组件的路径名
    //通过name+params传值的需要，需要再路径后面:参数名
    { path: '/study/:p1',name:'study', component: study },
    { path: '/learn', component: learn },
    { path: '/query', component: query },
    { path: '/params',name:'params', component: params }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}

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

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

相关文章

PythonOcc + pyqt 显示——stp step文件导入 部件识别 爆炸图展示

PythonOcc + pyqt 显示——stp step文件导入 部件识别 爆炸图展示

使用 occ 7.4.0 版本，pyqt5, 解决了init 缺少window_handle 的问题，另外添加一个左边的显示窗口 import ctypes import logging import os import sysfrom OCC.Display import OCCViewer from PyQt5 import QtCore, QtGui, QtOpenGL, QtWidgets# check if signal available, …
阅读更多...
电脑技巧：PrivaZer电脑清理工具介绍（附下载）

电脑技巧：PrivaZer电脑清理工具介绍（附下载）

今天给大家推荐一款非常实用的电脑垃圾清理工具&#xff0c;感兴趣的朋友可以下载看看&#xff01; 下载&#xff1a;飞猫盘&#xff5c;文件加速传输工具&#xff5c;云盘&#xff5c;橘猫旗下新概念云平台 一、软件介绍 PrivaZer是一款免费好用的老牌清理软件&#xff0c;除…
阅读更多...
4.4 网际控制报文协议ICMP

4.4 网际控制报文协议ICMP

思维导图&#xff1a; 4.4 网际控制报文协议ICMP - 笔记 --- **定义**: - 网际控制报文协议ICMP(Internet Control Message Protocol)是根据[RFC 792]定义的一种协议。它的主要功能是为了提高IP数据报的转发效率和确保交付的成功率。 **主要功能**: 1. **差错报告**: ICMP允…
阅读更多...
LeetCode算法位运算—只出现一次的数字

LeetCode算法位运算—只出现一次的数字

目录 136. 只出现一次的数字 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 代码&#xff1a; 运行结果&#xff1a; 补充 异或的重要性质 136. 只出现一次的数字 - 力扣&#xff08;LeetCode&#xff09; 给你一个 非空 整数数组 nums &#xff0c;除了某…
阅读更多...
5分钟内在Linux上安装.NET Core应用程序

5分钟内在Linux上安装.NET Core应用程序

作为开源的忠实粉丝&#xff0c;我喜欢 .NET Core 的跨平台特性。它开启了无限的可能性&#xff0c;从业余爱好项目、实验和概念验证&#xff0c;到在具有高安全性和可扩展性的经济高效基础设施上运行的大规模高负载生产应用程序。我通常从任何云平台提供商那里获得最简单、最便…
阅读更多...
页面打印功能，单选框多选框选中后，打印时不显示选中效果

页面打印功能，单选框多选框选中后，打印时不显示选中效果

使用antdv&#xff0c;或者element-ui时&#xff0c;如果对页面进行打印&#xff0c;存在单选&#xff0c;多选样式无法显示的情况&#xff0c;在打印预览界面--》更多设置中&#xff0c;背景图形选中就可以了。
阅读更多...
linux挂载数据盘后格式化添加挂点

linux挂载数据盘后格式化添加挂点

df -h 查看磁盘大小时&#xff0c;未格式化的磁盘无法查看&#xff0c;可以通过 fdisk -l 命令查看 如果这里看不到数据盘&#xff0c;有可能是数据盘没有挂载到服务器上&#xff0c;可以参考阿里云挂载数据盘操作&#xff0c; 已挂载的数据盘进行格式化创建文件系统&#xff…
阅读更多...
《算法通关村第一关——链表经典问题之两个链表的第一个公共子节点问题笔记》

《算法通关村第一关——链表经典问题之两个链表的第一个公共子节点问题笔记》

《算法通关村第一关——链表经典问题之两个链表的第一个公共子节点问题笔记》 问题描述 输入两个链表&#xff0c;找出他们的第一个公共节点。 例如下面的两个链表 两个链表的头节点都是已知的&#xff0c;相交之后成为一个单链表&#xff0c;但是相交的位置未知&#xff0c…
阅读更多...
leaflet地图线段和区域的回显

leaflet地图线段和区域的回显

线段回显 searchLineArr: [], // 存放搜索到的路段或者道路的线段drawSearchLineArr(line) {/* 移除线段 */this.searchLineArr.forEach((polyline) > {polyline.remove();});this.searchLineArr []/* 移除线段 */this.map.panTo(JSON.parse(line)[0]); // 地图视图移动到线…
阅读更多...
Java扫雷游戏总结 （小项目）

Java扫雷游戏总结 （小项目）

【尚学堂Java开发扫雷游戏项目】1个半小时做出java扫雷小游戏_java小游戏_Java游戏开发_Java练手项目_java项目实战_java初级项目_哔哩哔哩_bilibili 前言&#xff1a; 记录的是大致的写代码过程为了视觉上更清晰&#xff0c;下面只是放出了完成该功能的核心代码&#xff0c;把…
阅读更多...
分享Java NET Python三大技术下AutojsPro7云控代码

分享Java NET Python三大技术下AutojsPro7云控代码

引言 有图有真相&#xff0c;那短视频就更是真相了。下面是三大语言的短视频。 Java源码版云控示例&#xff1a; Java源码版云控示例在线视频 Net源码版云控示例&#xff1a; Net源码版云控示例在线视频亚丁号-知识付费平台 支付后可见 扫码付费可见 Python源码版云控示例&…
阅读更多...
【容器】Docker（学习笔记）

【容器】Docker（学习笔记）

一、初识Docker 1、Docker概述 Docker 是一个开源的应用容器擎。 诞生于 2013 年初&#xff0c;基于 Go 语言实现&#xff0c;dotcloud 公司出品&#xff08;后改名为Docker Inc&#xff09;。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&a…
阅读更多...
【小黑嵌入式系统第三课】嵌入式系统硬件平台（一）——概述、总线、存储设备（RAMROMFLASH)

【小黑嵌入式系统第三课】嵌入式系统硬件平台（一）——概述、总线、存储设备（RAMROMFLASH)

上一课&#xff1a; 【小黑嵌入式系统第二课】嵌入式系统的概述&#xff08;二&#xff09;——外围设备、处理器、ARM、操作系统 文章目录 一、概述二、总线1. 总线的概念1.1 总线结构1.2 总线类型1.2.1 数据总线1.2.2 程序总线1.2.3 数据地址总线1.2.4 程序地址总线 2. 总线协…
阅读更多...
new Object()到底占用几个字节

new Object()到底占用几个字节

Java内存模型 对象内存中可以分为三块区域&#xff1a;对象头(Header)&#xff0c;实例数据(Instance Data)和对齐填充(Padding)&#xff0c;以64位操作系统为例(未开启指针压缩的情况)Java对象布局 如下图所示&#xff1a; 其中对象头中的Mark Word中的详细信息在文章synchr…
阅读更多...
地下水与饮用水提标处理树脂

地下水与饮用水提标处理树脂

随着饮用水和地下水污染物检测技术水平的不断提高&#xff0c;世界各国管理机构跟踪监测的水体污染数目也不断增加。近年来&#xff0c;针对砷、高氯酸盐和铀等水体污染物&#xff0c;新的强化控制措施不断的付诸实施。此外&#xff0c;用氯化物及其衍生物进行水体消毒会带来诸…
阅读更多...
leetcode 1143. 最长公共子序列、1035. 不相交的线、53. 最大子数组和

leetcode 1143. 最长公共子序列、1035. 不相交的线、53. 最大子数组和

1143. 最长公共子序列 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些…
阅读更多...
【ajax】withCredentials

【ajax】withCredentials

默认值&#xff1a;false。在获取同域资源时设置 withCredentials 没有影响。 true&#xff1a;在跨域请求时&#xff0c;会携带用户凭证 false&#xff1a;在跨域请求时&#xff0c;不会携带用户凭证&#xff1b;返回的 response 里也会忽略 cookie ajax中的作用 跨域请求时…
阅读更多...
药物滥用第一篇介绍

药物滥用第一篇介绍

AMP&#xff1a; Ampicillin&#xff0c;中文名氨苄青霉素&#xff0c;同义名氨苄西林&#xff0c;一种β-内酰胺类抗生素&#xff0c;属于青霉素家族的一员&#xff0c;化学式为C16H19N3O4S&#xff0c;可治疗多种细菌感染。 氨苄西林为半合成的广谱青霉素&#xff08;结构如上…
阅读更多...
基于单片机设计的家用自来水水质监测装置

基于单片机设计的家用自来水水质监测装置

一、前言 本文介绍基于单片机设计的家用自来水水质监测装置。利用STM32F103ZET6作为主控芯片&#xff0c;结合水质传感器和ADC模块&#xff0c;实现对自来水水质的检测和监测功能。通过0.96寸OLED显示屏&#xff0c;将采集到的水质数据以直观的方式展示给用户。 随着人们对健…
阅读更多...
Unity DOTS World Entity ArchType Component EntityManager System概述

Unity DOTS World Entity ArchType Component EntityManager System概述

最近DOTS终于发布了正式的版本, 我们来分享以下DOTS里面地几个关键概念&#xff0c;方便大家上手学习掌握Unity DOTS开发。 Unity DOTS 中所有的Entities 都是被放到World世界中。每个Entity在它所在的World里面有唯一不同的ID号来区分。DOTS项目中可以同时有多个World。每个W…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023