【Vue】编程式导航-两种路由跳转方式

问题
点击按钮跳转如何实现？

---

方案
编程式导航：用JS代码来进行跳转
   以前使用js是通过location.href来跳转的，但由于vue中使用的是路由，它有专门的跳转方式
  

---

两种语法：

• path 路径跳转 （简易方便）
  
• name 定名路由跳转 (适合 path 路径长的场景)
  

   这两种方式都可以被称为编程式导航
  

---

一、path路径跳转语法

特点：简易方便
router指的是大的路由对象

1. //简单写法
2. this.$router.push('路由路径')
4. //完整写法
5. this.$router.push({
6.   path: '路由路径'
7. })

复制代码

---

二、name定名路由跳转

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

• 路由规则，必须在main.js中配置name配置项
  
  1. { name: '路由名', path: '/path/xxx', component: XXX },

  复制代码
• 通过name来进行跳转
  
  1. //简单写法
  2. this.$router.push('路由名')
  3. //完整写法
  4. this.$router.push({
  5.   name: '路由名'
  6. })

  复制代码

---

三、代码示例

main.js

1. import Home from '@/views/Home'
2. import Search from '@/views/Search'
3. import NotFound from '@/views/NotFound'
4. import Vue from 'vue'
5. import VueRouter from 'vue-router'
6. Vue.use(VueRouter) // VueRouter插件初始化
8. // 创建了一个路由对象
9. const router = new VueRouter({
10.   // 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则
11.   mode: 'history',
12.   routes: [
13.     { path: '/', redirect: '/home' },
14.     { path: '/home', component: Home },
15.     { name: 'search', path: '/search/:words?', component: Search },
16.     { path: '*', component: NotFound }
17.   ]
18. })
20. export default router

复制代码

Home.vue

1. <template>
2.   <div class="home">
3.     <div class="logo-box"></div>
4.     <div class="search-box">
5.       <input type="text">
6.       <button @click="goSearch">搜索一下</button>
7.     </div>
8.     <div class="hot-link">
9.       热门搜索：
10.       <router-link to="/search/黑马程序员">黑马程序员</router-link>
11.       <router-link to="/search/前端培训">前端培训</router-link>
12.       <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
13.     </div>
14.   </div>
15. </template>
17. <script>
18. export default {
19.   name: 'FindMusic',
20.   methods: {
21.     goSearch () {
22.       // 1. 通过路径的方式跳转
23.       // (1) this.$router.push('路由路径') [简写]
24.       his.$router.push('/search')
26.       // (2) this.$router.push({     [完整写法]
27.       //         path: '路由路径'
28.       //     })
29.       this.$router.push({
30.               path: '/search'
31.       })
33.       // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
34.       //    this.$router.push({
35.       //        name: '路由名'
36.       //    })
37.       this.$router.push({
38.         name: 'search'
39.       })
40.     }
41.   }
42. }
43. </script>
45. <style>
46. .logo-box {
47.   height: 150px;
48.   background: url('@/assets/logo.jpeg') no-repeat center;
49. }
50. .search-box {
51.   display: flex;
52.   justify-content: center;
53. }
54. .search-box input {
55.   width: 400px;
56.   height: 30px;
57.   line-height: 30px;
58.   border: 2px solid #c4c7ce;
59.   border-radius: 4px 0 0 4px;
60.   outline: none;
61. }
62. .search-box input:focus {
63.   border: 2px solid #ad2a26;
64. }
65. .search-box button {
66.   width: 100px;
67.   height: 36px;
68.   border: none;
69.   background-color: #ad2a26;
70.   color: #fff;
71.   position: relative;
72.   left: -2px;
73.   border-radius: 0 4px 4px 0;
74. }
75. .hot-link {
76.   width: 508px;
77.   height: 60px;
78.   line-height: 60px;
79.   margin: 0 auto;
80. }
81. .hot-link a {
82.   margin: 0 5px;
83. }
84. </style>

复制代码

---

四、path路径跳转传参

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

两种传参方式
1.查询参数
2.动态路由传参
传参
两种跳转方式，对于两种传参方式都支持：
① path 路径跳转传参
② name 定名路由跳转传参
path路径跳转传参（query传参）

1. // 简单写法
2. this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
3. // 完整写法（更适合传参）
4. this.$router.push({
5.   path: '/路径',
6.   query: {
7.     参数名1: '参数值1',
8.     参数名2: '参数值2'
9.   },
10.   replace: true // 不占用浏览器的历史记录
11. })

复制代码

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

---

path路径跳转传参（动态路由传参）
   首先修改路由:word

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

复制代码

接受参数的方式依然是：$route.params.参数值
**留意：**path不能共同params使用

---

五、编程式导航-name定名路由传参

name 定名路由跳转传参 (query传参)

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

复制代码

通过this.$route.query.参数名
name 定名路由跳转传参 (动态路由传参)

1. this.$router.push({
2.   name: '路由名字',
3.   params: {
4.     参数名: '参数值',
5.   }
6. })

复制代码

---

六、总结

路径长，使用name，路径多，使用动态路由传参
1.path路径跳转

• query传参
  
  1. this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
  2. this.$router.push({
  3.   path: '/路径',
  4.   query: {
  5.     参数名1: '参数值1',
  6.     参数名2: '参数值2'
  7.   }
  8. })

  复制代码
• 动态路由传参
  
  1. this.$router.push('/路径/参数值')
  2. this.$router.push({
  3.   path: '/路径/参数值'
  4. })

  复制代码

2.name定名路由跳转

• query传参
  
  1. this.$router.push({
  2.   name: '路由名字',
  3.   query: {
  4.     参数名1: '参数值1',
  5.     参数名2: '参数值2'
  6.   }
  7. })

  复制代码
• 动态路由传参 (须要配动态路由)
  
  1. this.$router.push({
  2.   name: '路由名字',
  3.   params: {
  4.     参数名: '参数值',
  5.   }
  6. })

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。