Python私教张大鹏 Vue3整合Vue Router之编程式导航

news2024/11/27 19:56:28

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

导航到不同的位置

注意: 下面的示例中的 router 指代路由器实例。在组件内部,你可以使用 $router 属性访问路由,例如 this.$router.push(...)。如果使用组合式 API,你可以通过调用 useRouter() 来访问路由器。

想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。

当你点击 <router-link> 时,内部会调用这个方法,所以点击 <router-link :to="..."> 相当于调用 router.push(...)

声明式编程式
<router-link :to="...">router.push(...)

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })

美化页面样式

<template>
  <div class="h-12 bg-indigo-50 flex justify-center items-center"></div>
  <div class="flex min-h-72 bg-teal-50">
    <div class="min-w-36 bg-purple-200"></div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

在这里插入图片描述

通过router-link跳转

<template>
  <div class="h-12 bg-indigo-50 flex justify-center items-center"></div>
  <div class="flex min-h-72 bg-teal-50">
    <div class="min-w-36 bg-purple-200 flex flex-col">
      <router-link to="/index" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">首页</router-link>
      <router-link to="/about" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">关于</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

在这里插入图片描述

通过按钮点击跳转首页

<script setup>
import {useRouter} from "vue-router";

const router = useRouter()
const clickToIndex = () => {
  router.push("/index")
}
</script>
<template>
  <div class="h-12 bg-indigo-50 flex justify-center items-center"></div>
  <div class="flex min-h-72 bg-teal-50">
    <div class="min-w-36 bg-purple-200 flex flex-col">
      <router-link to="/index" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
        首页
      </router-link>
      <router-link to="/about" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
        关于
      </router-link>
      <button
          class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center"
          @click="clickToIndex"
      >按钮:首页
      </button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

在这里插入图片描述

路径对象

const clickToIndex = () => {
  //router.push("/index")
  router.push({path: "/index"})
}

通过按钮点击跳转关于页面

<script setup>
import {useRouter} from "vue-router";

const router = useRouter()
const clickToIndex = () => {
  //router.push("/index")
  router.push({path: "/index"})
}
const clickToAbout = () => {
  router.push({path: "/about"})
}
</script>
<template>
  <div class="h-12 bg-indigo-50 flex justify-center items-center"></div>
  <div class="flex min-h-72 bg-teal-50">
    <div class="min-w-36 bg-purple-200 flex flex-col">
      <router-link to="/index" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
        首页
      </router-link>
      <router-link to="/about" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
        关于
      </router-link>
      <button
          class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center"
          @click="clickToIndex"
      >按钮:首页
      </button>
      <button
          class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center"
          @click="clickToAbout"
      >按钮:关于
      </button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

在这里插入图片描述

通过路径传参

const clickToAbout = () => {
  router.push({path: "/about/123", query: {"id": "333"}})
}

使用命名路由

const clickToAbout = () => {
  router.push({name: "layout_about", params: {"id": "333"}, query: {"id": "333"}})
}

替换当前位置

它的作用类似于 router.push,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。

声明式编程式
<router-link :to="..." replace>router.replace(...)

也可以直接在传递给 router.pushto 参数中增加一个属性 replace: true

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

横跨历史

该方法采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似于 window.history.go(n)

例子:

// 向前移动一条记录,与 router.forward() 相同
router.go(1)

// 返回一条记录,与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)

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

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

相关文章

vue-cli是什么?和 webpack是什么关系?

前言 Vue CLI是Vue.js项目的官方脚手架&#xff0c;基于Node.js与Webpack构建。安装Vue CLI前需确保Node.js已安装&#xff0c;随后通过npm全局安装。Vue CLI能迅速创建和管理Vue.js项目&#xff0c;提升开发效率。而Webpack则负责资源打包&#xff0c;通过配置文件管理依赖、插…

FiRa标准UWB MAC实现(三)——距离如何获得?

继续前期FiRa MAC相关介绍,将FiRa UWB MAC层相关细节进一步进行剖析,介绍了UWB技术中最重要的一个点,高精度的距离是怎么获得的,具体使用的测距方法都有哪些,原理又是什么。为后续FiRa UWB MAC的实现进行铺垫。 3、测距方法 3.1 SS-TWR SS-TWR为Single-Sided Two-Way Ra…

通过python操作redis(windows)

注意在连接之前要确保 redis 服务已经安装。 更多的安装信息请查看&#xff1a;https://blog.csdn.net/sinat_20471177/article/details/132042779?spm1001.2014.3001.5501 redis 模块 Python 要使用 redis&#xff0c;需要先安装 redis 模块。如果要做数据导入/导出操作的…

动手学深度学习4.10 实战Kaggle比赛:预测房价-笔记练习(PyTorch)

以下内容为结合李沐老师的课程和教材补充的学习笔记&#xff0c;以及对课后练习的一些思考&#xff0c;自留回顾&#xff0c;也供同学之人交流参考。 本节课程地址&#xff1a;实战 Kaggle 比赛&#xff1a;预测房价_哔哩哔哩_bilibili 本节教材地址&#xff1a;4.10. 实战Ka…

公式转换坑

在线LaTeX公式编辑器-编辑器 (latexlive.com) 这个好用 latex输入后转mathtype等 1 \mathcal{V}\{0,1,\ldots,|\mathcal{V}|-1\} 这个玩意在Word死活打不出来 使用下面的方法也不行 mathtype也不行 故换符号之 LaTeX公式与MathType公式如何快速转换-MathType中文网 如何在…

.Net实现SCrypt Hash加密

方案1 &#xff08;加密后存储“算法设置”、“盐(随机值)”、“Hash值”&#xff0c;以“$”分隔&#xff09;&#xff1a; //Nuget引入SCrypt.NET库 using Org.BouncyCastle.Crypto.Generators; using Scrypt; using System; using System.Security.Cryptography; namespace …

Python基础教程(九):装饰器

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

强大的.NET的word模版引擎NVeloDocx

在Javer的世界里&#xff0c;存在了一些看起来还不错的模版引擎&#xff0c;比如poi-tl看起来就很不错&#xff0c;但是那是人家Javer们专属的&#xff0c;与我们.Neter关系不大。.NET的世界里Word模版引擎完全是一个空白。 很多人不得不采用使用Word XML结合其他的模版引擎来…

怎样快速获取Vmware VCP 证书,线上考试,voucher报名优惠

之前考一个VCP证书&#xff0c;要花大一万的费用&#xff0c;可贵了&#xff0c;考试费不贵&#xff0c;贵就贵在培训费&#xff0c;要拿到证书&#xff0c;必须交培训费&#xff0c;即使vmware你玩的很溜&#xff0c;不需要再培训了&#xff0c;但是一笔贵到肉疼的培训费你得拿…

嵌入式Linux系统编程 — 3.4 access、chmod和 umask函数修改文件访问权限

目录 1 文件访问权限 1.1 文件权限基本概念 1.2 普通权限 1.3 特殊权限 2 目录权限 3 access函数检查文件权限 3.1 access函数简介 3.2 示例程序 3.3 chmod修改文件权限 3.4 fchmod函数 4 umask 函数 4.1 umask简介 4.2 示例程序 1 文件访问权限 1.1 文件权限基本…

奇安信停服,国内还有什么可用的高防么?

这里写自定义目录标题 背景DDOS怎么办&#xff1f;方案推荐总结 背景 继前段时间百度云加速通知免费服务&#xff0c;6月底奇安信也将停止服务&#xff0c;到时候国内将几乎不存在免费好用的高防CDN了&#xff1b;类似的事情还有阿里云和腾讯云的一年期免费SSl证书也都停止供应…

2024 AEE | 风丘科技将亮相日本爱知国际会展中心——共同创造!

2024年名古屋汽车工程博览会&#xff08;Automotive Engineering Exposition 2024 NAGOYA&#xff09;将于7月17-19日在日本爱知县国际展示场&#xff08;Aichi Sky Expo&#xff09;开展。本展会是专门为活跃在汽车行业的工程师和研究人员举办的汽车技术展览&#xff0c;汇聚了…

vmware-17虚拟机安装教程,安装linux centos系统

下载VMware 1.进入VMware官网&#xff1a;https://www.vmware.com/sg/products/workstation-pro.html 2.向下翻找到&#xff0c;如下界面并点击“现在安装” 因官网更新页面出现误差&#xff0c;现提供vmware17安装包网盘链接如下&#xff1a; 链接&#xff1a;https://pan.b…

细说NLP中的Embedding层

文章目录 前言一、为什么要引入Embedding层二、Embedding层是怎么发挥作用的&#xff1f;三、感受Embedding的强大四、为什么理解Embedding的底层原理&#xff1f;总结 前言 在构建高效的自然语言处理模型时&#xff0c;Embedding层是不可或缺的组成部分。它不仅可以帮助我们捕…

基于JSP的健身俱乐部会员管理系统的设计与实现

【免费】基于JSP的健身俱乐部会员管理系统.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89416957 基于JSP的健身俱乐部会员管理系统的设计与实现 摘 要 目前我国虽然己经开发出了应用计算机操作的健身俱乐部管理系统&#xff0c;但管理软件&#xff0c;管理方…

Flutter 实现dispose探测控件

文章目录 前言一、什么是dispose探测控件&#xff1f;1、通常情况2、使用dispose探测控件 二、如何实现1、继承StatefulWidget2、定义dipose回调3、定义child4、重载Dispose方法5、build child 三、完整代码四、使用示例1、基本用法2、设置定义数据 总结 前言 开发flutter一般…

LabVIEW调用DLL时需注意的问题

在LabVIEW中调用DLL&#xff08;动态链接库&#xff09;是实现与外部代码集成的一种强大方式&#xff0c;但也存在一些常见的陷阱和复杂性。本文将从参数传递、数据类型匹配、内存管理、线程安全、调试和错误处理等多个角度详细介绍LabVIEW调用DLL时需要注意的问题&#xff0c;…

第1回 最开始的两行代码

当你按下开机键的那一刻,在主板上提前写死的固件程序BIOS会将硬盘启动区中的512(B)的数据,原封不动地复制到内存中的0x7c00这个位置,并跳转到那个位置: 下面我们针对每一步做详细介绍. 开机后初始化指向BIOS CPU中有一个PC寄存器,里面存储这将要执行的指令在内存中的地…

推测性解码:加速多模态大型语言模型的推理

大模型&#xff08;LLMs&#xff09;以其卓越的性能在多个应用场景中大放异彩。然而&#xff0c;随着应用的深入&#xff0c;这些模型的推理速度问题逐渐凸显。为了解决这一挑战&#xff0c;推测性解码&#xff08;Speculative Decoding, SPD&#xff09;技术应运而生。本文深入…

ROS geometry_msgs和sensor_msgs

ROS geometry_msgs和sensor_msgs geometry_msgs geometry_msgs 是 ROS&#xff08;Robot Operating System&#xff09;中用于几何计算和空间表示的一个核心消息包。它定义了一系列消息类型&#xff0c;用于表示位置、方向、速度等几何概念。以下是一些 geometry_msgs 中定义…