第三十七章 Vue之编程式导航及跳转传参

目录

一、编程式导航跳转方式

1.1. path 路径跳转

1.1.1. 使用方式

1.1.2. 完整代码

1.1.2.1. main.js

1.1.2.2. App.vue

1.1.2.3. index.js

1.1.2.4. Home.vue

1.1.2.5. Search.vue 

1.2. name 命名路由跳转

1.2.1. 使用方式

1.2.2. 完整代码

1.2.2.1. main.js

1.2.2.2. Home.vue 

二、编程式导航跳转传参

2.1. path路径跳转传参

2.1.1. 查询参数传参（简写）

2.1.1.1. Home.vue

2.1.1.2. Search.vue

2.1.2. 查询参数传参（完整写法）

2.1.2.1. Home.vue

2.1.3. 动态路由传参（简写）

2.1.3.1. index.js

2.1.3.2. Home.vue

2.1.3.3. Search.vue

2.1.4. 动态路由传参（完整写法）

2.2. name命名路由跳转传参

2.2.1. 查询参数传参

2.1.1.1. Home.vue

2.1.1.2. Search.vue

2.1.1.3. index.js

2.2.2. 动态路由传参

2.1.3.1. index.js

2.1.3.2. Home.vue

2.1.3.3. Search.vue

---

一、编程式导航跳转方式

前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。

1.1. path 路径跳转

特点：简易方便

1.1.1. 使用方式

1.1.2. 完整代码

1.1.2.1. main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

1.1.2.2. App.vue

<template><div id="app"><div class="link"><router-link to="/home">首页</router-link><router-link to="/search">搜索页</router-link></div><router-view></router-view></div>
</template><script>
export default {};
</script><style scoped>
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
</style>

1.1.2.3. index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search', component: Search }],mode: "history"
})export default router

1.1.2.4. Home.vue

​
<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/?key=王哲晓">王哲晓</router-link><router-link to="/search?key=学习Vue">学习Vue</router-link><router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link></div></div>
</template><script>
export default {name: 'FindMusic',methods: {goSearch () {// 通过路径的方式跳转的两种写法// (1) 简写// this.$router.push('路由路径')// this.$router.push('/search')// (2) 完整写法// this.$router.push({//   path: '路由路径'// })this.$router.push({path: '/search'})}}
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>​

1.1.2.5. Search.vue 

<template><div class="search"><p>搜索关键字: {{ $route.query.key }}</p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {console.log(this.$route.query);}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>

1.2. name 命名路由跳转

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

1.2.1. 使用方式

通过name属性定义路由名 

跳转方法中通过name属性指定路由即可 

1.2.2. 完整代码

在前面的代码基础上做适当调整：

1.2.2.1. main.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'search', path: '/search/:words?', component: Search }],mode: "history"
})export default router

1.2.2.2. Home.vue 

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/?key=王哲晓">王哲晓</router-link><router-link to="/search?key=学习Vue">学习Vue</router-link><router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link></div></div>
</template><script>
export default {name: 'FindMusic',methods: {goSearch () {// 通过命名路由的方式跳转（需要给路由起名字）// this.$router.push({//   name: '路由名'// })this.$router.push({name: 'search'})}}
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>

二、编程式导航跳转传参

在点击按钮时，跳转需要传参的实现方式和声明式跳转传参一样也有两种：

查询参数 + 动态路由传参

编程式导航两种跳转方式对于两种传参方式也都支持

2.1. path路径跳转传参

2.1.1. 查询参数传参（简写）

传递多个参数通过&分隔：

取值方式：

2.1.1.1. Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input v-model="inpValue" type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/?key=王哲晓">王哲晓</router-link><router-link to="/search?key=学习Vue">学习Vue</router-link><router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link></div></div>
</template><script>
export default {name: 'FindMusic',data () {return {inpValue: ''}},methods: {goSearch () {// 简写// this.$router.push(`路由路径?参数名1=参数值1&参数名2=参数值2`)this.$router.push(`/search?key=${this.inpValue}`)}}
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>

2.1.1.2. Search.vue

<template><div class="search"><p>搜索关键字: {{ $route.query.key }}</p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {console.log(this.$route.query);}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>

2.1.2. 查询参数传参（完整写法）

更适合传递多个参数

 取值方式与上面相同：

2.1.2.1. Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input v-model="inpValue" type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/?key=王哲晓">王哲晓</router-link><router-link to="/search?key=学习Vue">学习Vue</router-link><router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link></div></div>
</template><script>
export default {name: 'FindMusic',data () {return {inpValue: ''}},methods: {goSearch () {// 完整写法，更适合传参// this.$router.push({ //   path: '路由路径',//   query: {//     参数名: 参数值,//     参数名: 参数值//   }// })this.$router.push({path: '/search',query: {key: this.inpValue}})}}
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>

2.1.3. 动态路由传参（简写）

取值方式：

2.1.3.1. index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search/:words?', component: Search }],mode: "history"
})export default router

2.1.3.2. Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input v-model="inpValue" type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/?key=王哲晓">王哲晓</router-link><router-link to="/search?key=学习Vue">学习Vue</router-link><router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link></div></div>
</template><script>
export default {name: 'FindMusic',methods: {goSearch () {this.$router.push(`/search/${this.inpValue}`)}}
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>

2.1.3.3. Search.vue

<template><div class="search"><p>搜索关键字: {{ $route.params.words }}</p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {console.log(this.$route.query);}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>

2.1.4. 动态路由传参（完整写法）

Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。

2.2. name命名路由跳转传参

2.2.1. 查询参数传参

传递多个参数通过&分隔：

取值方式：

2.1.1.1. Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input v-model="inpValue" type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/?key=王哲晓">王哲晓</router-link><router-link to="/search?key=学习Vue">学习Vue</router-link><router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link></div></div>
</template><script>
export default {name: 'FindMusic',data () {return {inpValue: ''}},methods: {goSearch () {this.$router.push({name: 'search',query: {key: this.inpValue}})}}
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>

2.1.1.2. Search.vue

<template><div class="search"><p>搜索关键字: {{ $route.query.key }}</p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {console.log(this.$route.query);}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>

2.1.1.3. index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'search', path: '/search', component: Search }],mode: "history"
})export default router

2.2.2. 动态路由传参

取值方式：

2.1.3.1. index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'search', path: '/search:words?', component: Search }],mode: "history"
})export default router

2.1.3.2. Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input v-model="inpValue" type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/?key=王哲晓">王哲晓</router-link><router-link to="/search?key=学习Vue">学习Vue</router-link><router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link></div></div>
</template><script>
export default {name: 'FindMusic',data () {return {inpValue: ''}},methods: {goSearch () {this.$router.push({name: 'search',params: {words: this.inpValue}})}}
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>

2.1.3.3. Search.vue

<template><div class="search"><p>搜索关键字: {{ $route.params.words }}</p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {console.log(this.$route.query);}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>