首页 程序笔记 vue跳转页面的方法

vue跳转页面的方法

1 router-link跳转

<!-- 直接跳转 -->
<router-link to='/testDemo'>
    <button>点击跳转2</button>
</router-link>
 
<!-- 带参数跳转 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
    <button>点击跳转1</button>
</router-link>
 
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
    <button>点击跳转3</button>
</router-link>

<router-link to="/HH?setid=123qq">跳转到至HelloVue</router-link>

2 this.$router.push()

<template>
    <div id='test'>
        <button @click='goTo()'>点击跳转4</button>
    </div>
</template>
<script>
    export default{
        name:'test',
        methods:{
            goTo(){
                //直接跳转
                this.$router.push('/testDemo');
 
                //带参数跳转
                this.$router.push({path:'/testDemo',query:{setid:123456}});
                this.$router.push({name:'testDemo',params:{setid:111222}});
            }
        }
    }
</script>

3 a标签可以跳转外部链接,不能路由跳转

<a href="https://www.baidu.com"><button>点击跳转5</button></a>

接收方怎么接收参数??this.$route.query.serid和this.$route.params.setid,以下举一个接收的例子

注意接收参数时是 $route 不是 $router 

<template>
<div>
testDemo{{this.$route.query.setid}}
</div>
</template>

站心网

1 router-link跳转<!-- 直接跳转 --> <router-link to='/testDemo'> <button>点击跳转2</button> ..

为您推荐

软件产品开发中常见的10个问题及处理方法

常见的10个问题#产品开发中常见的10个问题思维导图需求相关#1. 需求不明确#在日常工作中,需求来源于用户、老板、客户、竞品分析、业务部门、产品经理等,这些人或部门会提出需求,因为他们不是产品经理,提出的需求..

一个提升运营/营销转化率的万能方法!

之前,笔者有分享过说我最喜欢的增长是可复制可持续的增长,它一般都会有三个关键过程:首先是小范围测试,低成本试错,也就是最小可行性验证,让ROI最大化。然后是把测试的最优结果整理为可执行的标准化化流程。前..

js 刷新当前页面

本文为大家介绍三种js 刷新当前页面的方法:reload() 方法;replace() 方法;页面自动刷新;方法1:reload() 方法reload()方法用于刷新当前文档。reload() 方法类似于你浏览器上的刷新页面按钮。location.reload();方法..

学习最重要是方法,管理最重要是高度

技术学习要兼顾深度和广度夯实技术基础这么多年来,我面试了很多人。我越发感到「技术基础」非常重要。很多技术的本质是一样的。技术基础足够好的话,学东西可以非常快。往下到操作系统层面,甚至计算机硬件层面,你..

JavaScript 页面跳转、页面重定向

JavaScript 实现页面跳转重定向可以使用以下两种方法:window.location.replace("url")类似 HTTP 重定向将地址替换成新 url,该方法通过指定 URL 替换当前缓存在历史里(客户端)的项目,因此当使用 replace 方法之..

Java中String类常见的方法

以下介绍字符串常见的几个方法。介绍String类在 Java 中,String类是一个代表字符串的类,具有以下特性:不可变性:String对象一旦被创建就是不可变的,即它们的值在创建后不能被更改。任何对String对象的修改操作实..

.net 通过 HttpClient 下载文件同时报告进度的方法

通过 HttpClient 的 ContentLength 很多时候都可以拿到下载的内容的长度,通过 ReadAsync 可以返回当前读到的长度,将读取到的长度加起来就是已经下载的长度看起来很简单,于是直接给代码private static async Task ..

javascript 6种连接数组的方法和对比

在 JavaScript 中,有多种方法可以用来连接数组,以下是常见的几种:1. concat() 方法用于连接两个或多个数组,返回一个新的数组,不修改原数组。const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const result = arr..

.NET开源ORM FreeSql常见问题和解决方法

FreeSql 是一个功能强大的 .NET 开源 ORM(对象关系映射)工具,支持多种数据库类型并提供丰富的功能特性。以下是使用 FreeSql 过程中常见的问题及其解决方法:1. 数据库连接问题问题描述:无法连接数据库,报错提示..

js 数组方法 - 修改篇

js数组方法可分为三类:修改、访问、迭代。修改:改变原有数组访问:不改变原有数组,从原有数组中获取数据迭代:对数组的每一项进行处理,返回数据本文主要介绍数组的修改篇一、增加1、push()含义:在数组末尾添加..

sourcetree安装跳过注册方法

SourceTree下载提取码: ni9m 需翻墙或者破解注册当前只有Win的版本,Mac自行百度很多人用git命令行不熟练,那么可以尝试使用sourcetree进行操作。然鹅~~sourcetree又一个比较严肃的问题就是,很多人不会跳过注册或者..

.NET开发中常见的异常报错原因和解决方法?

在 .NET 开发中,常见的报错通常涉及代码编写、配置和运行时环境。以下是一些常见的报错类型及其解决建议:1. NullReferenceException原因:尝试访问空对象的成员。解决:在访问对象之前检查是否为 null,可以使用 C..

js使用IntersectionObserver实现锚点在当前页面视口时导读高亮

在 JavaScript 中可以通过监听页面滚动事件,检查每个锚点的位置,并根据当前滚动位置高亮相应的导航项,从而实现页面内锚点链接的导读高亮效果。交叉观察器 API(Intersection Observer API)提供了一种异步检测目..

js使用scroll事件实现锚点滚动到页面顶部时导航高亮

在 JavaScript 中,可以通过监听页面滚动事件,并判断页面顶部与各个锚点的距离来实现导航高亮效果。当某个锚点的内容块滚动到页面顶部时,自动高亮相应的导航项。以下是实现方式:1. HTML 结构假设我们有多个内容区..

修改VisualSVN Server地址为ip地址,修改svn服务端地址为ip或者域名地址的方法

svn服务端搭建成功之后,地址太长很麻烦,想搞一个服务器专门做svn服务端,修改svn地址为ip地址无奈网上教程不靠谱,于是自己研究了下1.修改VisualSVN 的地址2修改地址并保存很多人不成功就在这里,点击确认之后复制..

Angular Mock 一个类的静态方法

理解 Angular Mock 和 静态方法在 Angular 单元测试中,Angular Mock 是一个强大的工具,它允许我们模拟和替换 Angular 的服务、组件和其他依赖项。而静态方法 是属于类本身,而不是类的实例的方法。它们可以直接通..

Response.Redirect目标页面无法取到Session值

今天开发做一个登陆界面,登陆成功后通过Response.Redirect重定向到登陆后的目标页面。 目标页面做了登陆验证,如果Session中用户信息不存在,则需要重新登陆。结果发现登陆成功后,将用户信息保存到了Session中,..

解决.NET JAVA PHP中写入及读取memcache中数据不一致的方法

解决.NET JAVA PHP中写入及读取memcache中数据不一致的方法。公司部分接口使用PHP开发,部分接口使用.NET开放,.NET使用redis,PHP使用memcache作为分布式缓存服务器,但是部分业务需要.NET读取memcache里的数据。m..

AutoMapper使用方法

什么是AutoMapper? 一些orm框架,在用到Entity的时候有一些开源代码用到了automapper,将数据对象转成DTO。比如在ORM中,与数据库交互用的Model模型是具有很多属性。而当我们与其它系统(或系统中的其它结构)进行..

.NET调试Windows服务的方法

很多朋友编写Windows服务的时候都会觉得调试很麻烦,甚至不知道怎么调试。有些人可能添加个windows窗体用按键触发相关方法或者靠打印日志调试,那么到底windows服务怎么调试呢? 怎么编写代码就不说了。就说调试吧,..

发表回复

返回顶部