Vue路由跳转的几种方式

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

1.this. $router.push( )

跳转到指定的URL,在history栈中添加一个记录,点击后退会返回上一个页面。

1. 不带参数
    // 字符串
    this.$router.push('/home')
    this.$router.push('/home/first')
    // 对象
    this.$router.push({path:'/home'})
    this.$router.push({ path: '/home/first' })
    // 命名的路由
    this.$router.push({name:'home'})
2. query传参 
    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
    // html 取参 $route.query.id
    // script 取参 this.$route.query.id
3. params传参
     this.$router.push({name:'home',params: {id:'1'}}) 
    // 只能用 name
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
    // html 取参 $route.params.id
    // script 取参 this.$route.params.id
4. query和params区别
     query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传,
     密码之类还是用params刷新页面id还在
     params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

2.this. $router.replace( )

用法同上,但是跳转到指定的url,不会向history里面添加新的记录,点击返回,会跳转到上上一个页面,上一个记录是不存在的。

3.声明式路由跳转 router-link

浏览器在解析时,将它解析成一个类似于a标签。

router-link:可以一个组件,当服务器的数据返回之后,循环很多的router-link组件【创建组件实例的】1000+,创建组件实例的时候,一瞬间创建1000+很耗内存的,因此出现卡顿现象

基本用法
<li>
    <router-link to="/home/first">点击跳转</router-link>
</li>
1. 不带参数
    <router-link :to="{name:'home'}"> 
    <router-link :to="{path:'/home'}"> //name,path都行, 建议用name 
   // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
2. 带参数
    <router-link :to="{name:'home', params: {id:1}}"> 
   // params传参数 (类似post)
   // 路由配置 path: "/home/:id" 或者 path: "/home:id" 
   // 不配置path ,第一次可请求,刷新页面id会消失
   // 配置path,刷新页面id会保留
   // html 取参 $route.params.id
   // script 取参 this.$route.params.id
    <router-link :to="{name:'home', query: {id:1}}"> 
   // query传参数 (类似get,url后面会显示参数)
   // 路由可不配置
   // html 取参 $route.query.id
   // script 取参 this.$route.query.id

4.this. $router.go(n)

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面。文章来源地址https://www.toymoban.com/news/detail-742143.html

this. $router.go(1) //前进一步 相当于history.forward()
this. $router.go(-1) //后退一步 相当于history.back()
this. $router.go(10)

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

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

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

相关文章

  • uniapp页面跳转的几种方式

    定义:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 使用: 定义:可以关闭当前界面并跳转到其他的非tabbar界面(可带参数) 使用: 定义:关闭所有页面,打开到应用内的某个页面(可带参数) 使用: 定义:跳转到 tabBar 页面,并关闭其

    2024年02月01日
    浏览(48)
  • 【vue3】vue3路由跳转的方式

    如 : 有无this都行 $router.push(\\\'/plantduce\\\') this.$router.push(\\\'/plantduce\\\') vue3 || vue2 路由参考 useRouter 与 useRoute 都可以。

    2024年02月06日
    浏览(42)
  • JS 实现页面跳转的几种方法

    我总结了这五种方法: 第一种:使用JS跳转页面 (1)跳转带参 (2)跳转无参 第二种:返回上一次预览界面 HTML页面嵌套 第三种:button按钮添加事件跳转   第四种:在新窗口打开 第五种:通过meta设置跳转页面 这里还有一个页面传值 第一个页面 第二个页面

    2024年02月01日
    浏览(45)
  • uniapp页面跳转的几种方式 以及举例(2)

    又来混时长 嫖流量卷了 保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack 可以返回到原页面。   关闭当前页面,跳转到应用内的某个页面。   关闭所有页面,打开到应用内的某个页面。 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 关闭当前页面,返回上一

    2024年01月19日
    浏览(47)
  • vue获取当前路由的几种方式

    第一种 第二种 通过getCurrentInstance 获取当前的组件实例,从而通过其获取router,然后胡德当前路由地址 第三种 第四种 第五种

    2024年02月13日
    浏览(66)
  • 【Vue3】路由传参的几种方式

    路由导航有两种方式,分别是:声明式导航 和 编程式导航 参数分为query参数和params参数两种 1.传参 在路由路径后直接拼接 ?参数名:参数值 ,多组参数间使用 分隔。 如果参数值为变量,需要使用模版字符串。 2.接收与使用 1.传参 to不再传递字符,而是传一个对象,由于参数

    2024年02月21日
    浏览(52)
  • Vue中监听路由参数变化的几种方式

    目录 一. 路由监听方式: 通过 watch 进行监听 1. 监听路由从哪儿来到哪儿去 2. 监听路由变化获取新老路由信息 3.  监听路由变化触发方法 4. 监听路由的 path 变化 5. 监听路由的 path 变化, 使用handler函数 6. 监听路由的 path 变化,触发methods里的方法  二. 路由监听方式:key是用

    2024年02月14日
    浏览(69)
  • vue实现路由跳转的方法

            router-link是vue中提供的一种跳转页面的相关方式 1.其中router-link中使用v-bind绑定了一个对象(其实也可以理解成路由跳转的目的地) 2.其中有两种跳转方法,1-利用你的路由名字来进行跳转(推荐跳转的方法)  2-利用路由的path来进行跳转,但使用这种方法来进行跳转有

    2024年02月09日
    浏览(42)
  • Vue实现免密登录跳转的方式

    需求背景: 最近接到这样一个需求,点击某个url要跳转到某个系统的首页。 实现思路: 首先,我们要明确一个点,系统中所有的操作都要携带Token去发送请求,而登录一般是获取Token的来源,点击url实现跳转,并不意味着,不需要登录,只是我们在点击url的过程中,去帮助用

    2024年02月15日
    浏览(53)
  • vue3 route跳转的new tab两种方式

    Vue有两种类型的应用SPA和MAP,本文主要介绍的是SPA类型下面的使用方法 单页面应用,即一个web项目就只有一个页面(即一个HTML文件) 这种类型通常都需要router来进行页面跳转. 一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单

    2024年02月09日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包