vue路由有两种跳转方式 ----> 编程式与声明式，本文重点讲解vue路由的【编程式导航 】【编程式导航传参 ( 查询参数传参 & 动态路由传参 ) 】等内容，并结合具体案例让小伙伴们深入理解 ，彻底掌握！创作不易，需要的小伙伴 关注+收藏 哦~❣️

 💟 上一篇文章 vue路由跳转之【声明式导航与传参】（热榜前十）

📝 系列专栏 vue从基础到起飞

声明：图片资源部分来自于黑马程序员公开学习资料
本人在过去的学习当中，详细整理了笔记，供大家参考学习 

目录

一、编程式导航-两种路由跳转方式

1.问题

2.方案

3.语法

4.path路径跳转语法

5.name命名路由跳转

二、编程式导航-path路径跳转传参

1.问题

2.两种传参方式

3.传参

4.path路径跳转传参（query传参）

5.path路径跳转传参（动态路由传参）

三、编程式导航-name命名路由传参

1.name 命名路由跳转传参 (query传参)

2.name 命名路由跳转传参 (动态路由传参)

一、编程式导航-两种路由跳转方式

1.问题

点击按钮跳转如何实现？

2.方案

编程式导航：用JS代码来进行跳转

3.语法

两种语法：

• path 路径跳转 （简易方便）

• name 命名路由跳转 (适合 path 路径长的场景)

4.path路径跳转语法

特点：简易方便

  
  //简单写法
  this.$router.push('路由路径')
  ​
  //完整写法
  this.$router.push({
    path: '路由路径'
  })

5.name命名路由跳转

特点：适合 path 路径长的场景

语法：

• 路由规则，必须配置name配置项

    
    { name: '路由名', path: '/path/xxx', component: XXX },

• 通过name来进行跳转

    
    this.$router.push({
      name: '路由名'
    })

二、编程式导航-path路径跳转传参

1.问题

点击搜索按钮，跳转需要把文本框中输入的内容传到下一个页面如何实现？

2.两种传参方式

1.查询参数

2.动态路由传参

3.传参

两种跳转方式，对于两种传参方式都支持：

① path 路径跳转传参

② name 命名路由跳转传参

4.path路径跳转传参（query传参）

  
  //简单写法
  this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
  //完整写法
  this.$router.push({
    path: '/路径',
    query: {
      参数名1: '参数值1',
      参数名2: '参数值2'
    }
  })

接受参数的方式依然是：$route.query.参数名

5.path路径跳转传参（动态路由传参）

  
  //简单写法
  this.$router.push('/路径/参数值')
  //完整写法
  this.$router.push({
    path: '/路径/参数值'
  })

接受参数的方式依然是：$route.params.参数值

注意：path不能配合params使用

三、编程式导航-name命名路由传参

1.name 命名路由跳转传参 (query传参)

  
  this.$router.push({
    name: '路由名字',
    query: {
      参数名1: '参数值1',
      参数名2: '参数值2'
    }
  })

2.name 命名路由跳转传参 (动态路由传参)

  
  this.$router.push({
    name: '路由名字',
    params: {
      参数名: '参数值',
    }
  })

🚀 个人简介：6年开发经验，现任职某国企前端负责人，分享前端相关技术与工作常见问题~
💟 作    者：前端菜鸟的自我修养❣️
📝 专    栏：vue从基础到起飞
🌈 若有帮助，还请 关注➕点赞➕收藏，不行的话我再努努力💪💪💪   

下一篇讲解 ---- 【缓存组件keep-alive 】