2024年最新Vue路由跳转的五种方式_vue路由跳转方式，面试官vo

最新推荐文章于 2024-08-26 16:00:40 发布

2401_84447328

最新推荐文章于 2024-08-26 16:00:40 发布

阅读量1.6k

点赞数 11

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447328/article/details/138881648

版权

程序员专栏收录该内容

150 篇文章 0 订阅

订阅专栏

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

可追溯
编程式
router.push(…)//该方法的参数可以是一个字符串路径，或者一个描述地址的对象。
会向history栈添加新纪录

方式

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)

不可追溯
它不会向history添加新纪录

方式

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)

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

例子

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

export default{
  name:'page',
  data(){
  


## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**