Vue路由跳转的五种方式

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

Vue路由跳转的五种方式

vue路由跳转方式,前端框架知识,前端知识,vue.js,javascript,前端

路由跳转有两种形式:声明式导航、编程式导航

1. router-link

  1. 声明式
  2. prop=> :to=“…”
  3. 相当与 router.push(…)

router-link中链接如果是’ / '开始,就是从根路由开始
如果开始不带 ’ / ',则是从当前路由开始
例子

<template>
  <div>
    router-link 第一种方式
    <router-link :to="{name:'home'}">  
    <router-link :to="{path:'/home'}"> 
    name,path都行, 建议用name 
     <router-link :to"{
              name:'page1',
              query:{key:'我是传递的参数'}
    }">
    传递参数
    </router-link>
  </div>
</template>

2. this.$router.push()

  1. 可追溯
  2. 编程式
  3. router.push(…)//该方法的参数可以是一个字符串路径,或者一个描述地址的对象。
  4. 会向history栈添加新纪录
  5. 方式
    • name
      • route-name
      • params
      //params传参
      1.路由配置:
       name: 'home',
       path: '/home/:id'(或者path: '/home:id')
       2.跳转:
       this.$router.push({name:'home',params: {id:'1'}})
       注意:
       // 只能用 name匹配路由不能用path
       // params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
      
    • path
      • router-path
      • query
      //不带参数
       this.$router.push('/home')
       this.$router.push({name:'home'})
       this.$router.push({path:'/home'})
      //query传参
      1.路由配置:
       name: 'home',
       path: '/home'
       2.跳转:
       this.$router.push({name:'home',query: {id:'1'}})
       this.$router.push({path:'/home',query: {id:'1'}})
       3.获取参数
       html取参: $route.query.id
       script取参: this.$route.query.id
      
      //直接通过path传参
      1.路由配置:
      name: 'home',
      path: '/home/:id'
      2.跳转:
      this.$router.push({path:'/home/123'}) 
      或者:
      this.$router.push('/home/123') 
      3.获取参数:
      this.$route.params.id
      

例子

<template>
  <div>
    <vant-button @click='gotoFn1' type="defaullt">
      push第二种方式
    <van-button>
  </div>
</template>

export default{
  name:'page',
  data(){
  
  },
  methods:{
   gotoFn1(){
      this.$router.push({
        path:'/page',
        query:{key:'我是传递的参数'}
      })
      //push第二种路由跳转方法
    }
  }
  
}

3. this.$router.replace() (用法同push)

  1. 不可追溯
  2. 它不会向history添加新纪录
  3. 方式
    • name
      • route-name
      • params
        • 例如
            this.$route.push({
                name:' Home',//路由的名称
                params:{
                    site:[],
                    bu:[]
                  }
              })
        
        • 解释
        params:/router1/:site/:bu
        //这里的site、bu叫做params
        
    • path
      • router-path
      • query
        • 例如
        this.$router.push({
           path:'/home',
           query:{
            site:[],
            bu:[]
            }
        })
        
        -解释
        query:/router1?id=123
        这里的id叫做query
        

例子

<template>
  <div>
    <vant-button @click='gotoFn2' type="defaullt">
      replace第三种方式
    <van-button>
  </div>
</template>

export default{
  name:'page',
  data(){
  
  },
  methods:{
   gotoFn1(){
      this.$router.replace({
        path:'/page',
        query:{key:'我是传递的参数'}
      })
      //replace第三种路由跳转方法
    }
  }
  
}

4. this.$router.go(n)

  1. 相当于当前页面向前或向后跳转多少个页面,类似window.history.go(n)m可以为正数可为负数
  2. $router.go(-1)

例子

<template>
  <div>
    <vant-button @click='goBack' type="defaullt">
      第四种方式
    <van-button>
  </div>
</template>

export default{
  name:'page',
  data(){
  
  },
  methods:{
   goBack(){
      this.$router.go(-1)
       //go第四种路由跳转方法
    }
  }
  
}

5. location

  1. Location对象包含有关当前URL的信息
  2. href
    • 设置或返回完整的URL。
    • readable可读
      const url=location.href
      
    • writeable
     location.href='https://www.baidu.com'
    
  3. 刷新页面

可以用 window.location来访问


扩展

vue路由跳转方式,前端框架知识,前端知识,vue.js,javascript,前端

this.$ router.push()和 this.$ router.replace()的区别

this.$router.push()跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回上一个页面

this.$ router.replace()跳转到指定url路径,但是history栈中不会有记录,所以点击返回按钮时,会直接用【上一个页面之前的那个页面】来替换当前的页面

params和query的区别

query类似 get,跳转之后页面 url后面会拼接参数,类似?id=1。
非重要性的可以这样传,密码之类还是用params,刷新页面id还在。
params类似 post,跳转之后页面 url后面不会拼接参数。
总结:
1.query可以用name和path匹配路由,通过this.$route.query.id获取参数,刷新浏览器参数不会丢失
2.params只能用name匹配路由,通过path匹配路由获取不到参数,对应的路由配置path:‘/home/:id’或者path:‘home:id’,否则刷新浏览器参数丢失
3.直接通过url传参,push({path: ‘/home/123’})或者push(’/home/123’),对应的路由配置path:‘/home/:id’,刷新浏览器参数不会丢失。文章来源地址https://www.toymoban.com/news/detail-743540.html

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

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

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

相关文章

  • Vue实现免密登录跳转的方式

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

    2024年02月15日
    浏览(53)
  • 利用vue-router跳转的几种方式

    ​1 router-link 2 this.$router.push     跳转到指定路径,并将跳转页面压入history栈中,也就是添加了一个页面记录。 3 this.$router.replace     跳转到指定路径,将history栈中的当前页面替换为跳转到的页面。 4 this.$router.go(n)     在histroy栈中向前或者向后跳转n个页面,n可为正整数或负

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

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

    2024年02月09日
    浏览(45)
  • 前端刷新页面的五种方法(含原生js、vue和react)

    1、window.history.go(0)方法 2、location.reload()方法 3、location.href=location.href方法 4、vue-router方法 5、react-router方法

    2024年02月16日
    浏览(51)
  • 【vue3】在setup组合式api中不能使用beforeRouterEnter,监听来源路由和跳转的目标路由

    注意了,在vue3中的setup函数中是不可以使用beforeRouterEnter这个路由守卫的,请看vue-router的官方文档  导航守卫 | Vue Router 由此可见,在使用组合式api的时候,只有update和leave守卫,不符合我们的要求。 使用 script  setup/script这种形式的脚本,无法监听来源路由 方法一、我们可以

    2024年02月13日
    浏览(38)
  • 微前端:qiankun的五种通信方式

    今天盘点一下 qiankun 父子应用的通信方式都有哪些,我发现了 5 种。 1、localStorage/sessionStorage 2、通过路由参数共享 3、官方提供的 props 4、官方提供的 actions 5、使用vuex或redux管理状态,通过shared分享 接下来我们一个一个进行说明 有人说这个方案必须主应用和子应用是同一个

    2024年03月21日
    浏览(50)
  • 常见路由跳转的几种方式

    常见的路由跳转有以下四种: 1. router-link to=\\\"跳转路径\\\"  也可,如 2. this.$router.push() 跳转到指定的url,并在history中添加记录(即,点击回退,会退回上一个页面) 。 html中,如: 3. this.$router.replace() 跳转到指定的url, 但不会在history记录(即,点击回退 退回到上上个页) 4

    2024年02月10日
    浏览(43)
  • uniapp路由跳转的六种方式

    uniapp官方文档详解: 一、uni.navigateTo保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 注意: 页面跳转路径有层级限制,不能无限制跳转新页面 跳转到 tabBar 页面只能使用 switchTab 跳转 二、uni.redirectTo关闭当前页面,跳转到应用内的某个页面。

    2024年02月11日
    浏览(45)
  • 前端传递对象,后台接收对象的五种方式

    前端传递对象,后台接收对象的方式主要有以下几种: 使用 @RequestBody 注解 :在 Spring Boot 控制器方法中使用 @RequestBody 注解将请求体中的 JSON 数据映射为 Java 对象。 使用 @ModelAttribute 注解 :在 Spring Boot 控制器方法中使用 @ModelAttribute 注解将 URL 参数或表单数据映射为 Java 对象

    2024年02月06日
    浏览(50)
  • 微信小程序中路由跳转的方式有哪些?区别?

    微信小程序拥有 web 网页和 Application 共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能 在微信小程序中,每个页面可以看成是一个 pageModel , pageModel 全部以栈的形式进行管理 常见的微信小程序页面跳转方式有如下: wx.navig

    2024年02月01日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包