vue跳转到其他页面

这篇具有很好参考价值的文章主要介绍了vue跳转到其他页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、无参跳转

跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面。

// 声明式
<router-link :to = "…">
// 编程式,参数可以是一个字符串路径,或者一个描述地址的对象
<router.push('/user/index')>
// 直接写路由地址
this.$router.push('/user/index') 
// 地址对象
this.$router.push({path:'/user/index'})

二、带参跳转

1、query传参
this.$router.push({ path: '/user/index', query: { account: account }})

query传递的参数显示在地址栏中,刷新后依然存在,类似

http://localhost/user/index?account=123

参数接收方式

watch: {
   $route: {
     handler: function(route) {
       const account = route.query && route.query.account;
       console.info(account)
     },
     immediate: true
   }
}

或者放到created里面

created() {
   const {params, query} = this.$route;
   console.info(account)
}

或者放到mounted里面

mounted(){
   const account = this.$route.query && this.$route.query.account;
   console.info(account)
}

以上几种写法都是可以的。特别注意参数接收是使用$route,而非$router.

this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push, replace, go 等方法。

this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, params, query 等属性。

2、params传参
this.$router.push({ name: 'User', params: { account: account }})

参数接收方式与第一种类似,参数是 params

watch: {
   $route: {
     handler: function(route) {
       const account = route.params && route.params.account;
   	   console.info(account)
     },
     immediate: true
   }
}

这种方式不会在uri后面追加参数,params传递刷新会无效;

三、替换当前页

替换history栈中最后一个记录

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

push方法也可以传replace,默认值:false

this.$router.push({path: '/homo', replace: true})

四、向前或向后跳转

this.$router.go(n)

与js原生的 window.history.go(n)用法相同, 向前或向后跳转 n 个页面,n 为正时前往下一个页面,为负时返回之前页面。也就是从history栈中取前面还是后面的某个页面。文章来源地址https://www.toymoban.com/news/detail-546003.html

this.$router.go(1)  // 类似 history.forward()
this.$router.go(-1) // 类似 history.back()

到了这里,关于vue跳转到其他页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue项目启动后跳转到制定路由页面

    今天把自己的项目布局完成了,但是想在项目启动的时候默认跳转到登录页面。 这其实需要借助路由实现跳转 开始编写之前,大家可以看下我的布局: 关于如何安装并使用路由,可以参考:Vue安装并使用路由和路由器 需要对index.js进行修改,根据需求配置需要跳转的那个组

    2024年01月18日
    浏览(70)
  • Android与H5交互 -- 点击H5跳转到 Android原生 页面 ,webview与h5(js)交互

    Android与H5交互 app开发过程中,利用原生+h5模式来开发是比较常见的 下面案例演示的是:原生调起一个H5页面,然后H5点击跳转到原生 WebViewActivity页面 调用H5 ,点击H5链接 跳转到原生MainActivity页面 注意 别忘了 !-- 添加网络权限 -- 一、清单文件,增加的配置 data的数据就是H5

    2023年04月14日
    浏览(66)
  • html 点击按键跳转至百度/其他html页面(原生js)

    本文提供两种方式,以实现: 在html中,点击按键,跳转至另一html页面,或跳转至百度等网页。 方法一:通过超链接标签a实现:               在button外添加父标签,超链接a:                       跳转至百度:                        跳转至另

    2024年02月13日
    浏览(33)
  • vue页面动态生成二维码,扫描二维码跳转到微信小程序,同时传递参数

    最近领导提了个新的需求, 点击表格时,弹出一个二维码,微信扫描此二维码时,跳转到微信小程序,同时将所在行的id(即员工所在公司的id)传过去,这样员工在登录微信小程序时,根据此id就知道是哪个公司的员工登录或者注册 了! 刚开始想的是,直接把小程序的二维

    2024年02月11日
    浏览(74)
  • js(javascript)中页面跳转和窗口关闭等操作

    1、self.loaction.href=\\\"/具体路径\\\" 2、location.href=\\\"/具体路径\\\" 3、windows.loaction.href=\\\"/具体路径\\\" 4、this.loaction.href=\\\"/具体路径\\\" parent.location.href=\\\"/具体路径\\\" top.location.href=\\\"/具体页面\\\" window.location.reload() 使用该方法刷新页面时,如果有数据待提交,会提示是否提交 如果页面中自定义了f

    2024年02月16日
    浏览(49)
  • HTML跳转到页面指定位置

    使用纯超链接实现 1. 实现本页面跳转到指定位置(a.html),代码如下: 2. 实现点击跳转到新页面的指定位置,代码如下: 如果上方有导航条遮挡  

    2024年02月12日
    浏览(115)
  • Android跳转到QQ加群、聊天页面

    1.跳转到QQ聊天页面(单聊) 2.跳转到QQ群页面 在跳转到QQ群页面前,需要先获取要跳转到QQ群的Key,获取Key的网址:https://qun.qq.com/join.html 电脑 加群的 链接, 是 扫描 群的 二维码 图片 可以 得到 点击, 手机里打不开

    2024年02月04日
    浏览(44)
  • 微信小程序之普通页面跳转到tabBar页面

    前言 最近在做一个投稿小程序,主要功能是作者可以在微信小程序登录,注册,然后登陆进入主页面,可以投递稿件以及浏览自己已投递的稿件,和个人中心等主要功能,做的比较简单,因为本人对于小程序是一个初学者。 遇到的问题 登录页面不是tabBar页面,只是一个普通

    2024年02月08日
    浏览(63)
  • uniapp小程序跳转到外部页面

    方案1 使用uni-app的扩展组件 uni-link ,使用参考文档uni-app官网 该组件的行为是在app内打开外部浏览器,在h5打开新网页。 方案2: 通过先跳转到web-view页面,通过web-view这个标签进行动态绑定接收来的有效可访问网址,即可实现跳转功能 在pages中新建一个webview页面 如下。 然后

    2024年02月11日
    浏览(52)
  • uniapp中点击跳转到tabBar的页面

    今天在工作中用到需要从pages页面点击按钮跳转到底部栏的tabBar页面中的情况 最初代码是这样写的,路径正确,微信开发者工具也没有报错,但就是页面不跳转  后来经过阅读uniapp的官方文档,找到了从普通页面点击跳转至tabBar页面的方法:switchTab 话不多说,直接上代码,调

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包