vue-router4 (三) 路由导航的2种方法

news/2025/2/22 17:32:10/
const routes:Array<RouteRecordRaw> = [{path:"/",   //路径name:"Login",    //路由名称component:()=>import("../components/login.vue") //组件名,此处懒加载方式},{path:"/reg",name:"Reg",component:()=>import("../components/reg.vue")},
]

1.使用router-link 标签导航

(1)to属性后是字符串( to="path路径"):

<router-link to="/reg">Reg</router-link>

 (2)to属性后是对象(:to="name路由名称", 必须是属性绑定的形式,即必须是 ":to")

<router-link :to="{name:'Reg'}">Reg</router-link>

2.使用router.push()方法导航

必须先引入路由钩子:

import { useRouter } from 'vue-router';
const router = useRouter();

(1) router.push()中是字符串(对应path路径):

<button @click="toPage()">reg</button>const toPage= ()=>{router.push("/reg")   
}

(2) router.push()中是对象

①跳转到对应路径的路由

<button @click="toPage('/reg')">reg</button>
//传path路径const toPage = (url:string)=>{router.push({path:url   //传过来path路径})}

②跳转到对应名称的路由

<button @click="toPage('Reg')">reg</button>
//传路由名称const toPage = (url:string)=>{router.push({name:url  //传过来的路由名称})}


http://www.ppmy.cn/news/1368601.html

相关文章

25高数考研张宇 -- 公式总结(更新中)

1. 两个重要极限 (1) lim ⁡ x → 0 sin ⁡ x x 1 \lim _{x \rightarrow 0} \frac{\sin x}{x}1 limx→0​xsinx​1, 推广形式 lim ⁡ f ( x ) → 0 sin ⁡ f ( x ) f ( x ) 1 \lim _{f(x) \rightarrow 0} \frac{\sin f(x)}{f(x)}1 limf(x)→0​f(x)sinf(x)​1. (2) lim ⁡…

在您的下一个项目中选择 Golang 和 Node.js 之间的抉择

作为一名软件开发者&#xff0c;我总是在寻找构建应用程序的最快、最高效的工具。在速度和处理复杂任务方面&#xff0c;我认为 Golang 和 Node.js 是顶尖技术。两者在性能方面都享有极高的声誉。但哪一个更快——Golang 还是 Node&#xff1f;我决定深入一些硬核基准测试&…

MBD开发专栏介绍

文章目录 MBD概念MBD工具箱介绍MBD专栏介绍MBD概念 MBD : Model-Based Design,基于模型的设计方法是一种系统开发方法论,即对系统进行建模、分析、验证,然后基于模型自动生成代码、测试用例和文档的设计开发过程MBD采用的是基于自然语言和图形语言的双重建模方式,让模型与用…

Cypher语句查询neo4j数据库教程

文章目录 Cypher介绍执行Cypher语句查询总结 Cypher介绍 NodeMatcher和RelationshipMatcher能够表达的匹配条件相对简单&#xff0c;更加复杂的查询还是需要用Cypher语句来表达。 Py2neo本身支持执行Cypher语句的执行&#xff0c;可以将复杂的查询写成Cypher语句&#xff0c;…

WPF margin属性学习

一开始margin如下&#xff0c;显示如下&#xff1b; margin有四个值的时候是left、top、right、bottom&#xff1b; 如果是Margin“20,10”&#xff0c;则是指left、right设置为20&#xff0c;top、bottom设置为10&#xff1b; 看上去有些问题&#xff0c;现在top为负&#xf…

查找算法——java

顺序查找&#xff08;顺序表查找&#xff09; 顺序查找也称为线形查找&#xff0c;属于无序查找算法。从数据结构线形表的一端开始&#xff0c;顺序扫描&#xff0c;依次将扫描到的结 点关键字与给定值k相比较&#xff0c;若相等则表示查找成功&#xff1b;若扫描结束仍没…

高斯扩散过程

高斯扩散过程是一种数学模型&#xff0c;用于描述某些随机现象的时间演化&#xff0c;其中这些现象的概率密度函数&#xff08;PDF&#xff09;符合高斯分布&#xff0c;也称为正态分布。在物理和工程学领域&#xff0c;此类过程通常被用来描述热扩散、粒子扩散、概率密度演变等…

独立按键实验 - 四个按键实验

#include <reg52.h> //对系统默认数据类型重新定义 typedef unsigned int u16; typedef unsigned char u8; //定义独立按键控制脚 sbit KEY1 P3^1; sbit KEY2 P3^0; sbit KEY3 P3^2; sbit KEY4 P3^3; //定义LED灯的管脚 sbit LED1 P2^0; //后三…