第三十五章 Vue路由进阶之声明式导航（跳转传参）

目录

一、引言

二、查询参数传参

2.1. 使用方式

2.2. 完整代码

2.2.1. main.js

2.2.2. App.vue

2.2.3. Search.vue

2.2.4. Home.vue

2.2.5. index.js

三、动态路由传参

3.1. 使用方式

3.2. 完整代码

 3.2.1. main.js

3.2.2. App.vue

3.2.3. Search.vue

3.2.4. Home.vue

3.2.5. index.js

四、动态路由参数可选符

---

一、引言

本章主要讲解Vue中在跳转路由时, 如何进行传值。Vue为我们提供了两种路由跳转传值的方式：

1. 查询参数传参

2. 动态路由传参

二、查询参数传参

2.1. 使用方式

优点：比较适合传多个参数

① 语法格式如下：

单个参数：to="/path?参数名=值"

多个参数：to="/path?参数名=值&参数名2=值"

② 对应页面组件接收传递过来的值

$route.query.参数名

2.2. 完整代码

2.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')

2.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>

2.2.3. 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.2.4. Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button>搜索一下</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'
}
</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.2.5. 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: '/home', component: Home },{ path: '/search', component: Search }]
})export default router

三、动态路由传参

3.1. 使用方式

优点：优雅简洁，传单个参数比较方便

① 配置动态路由

② 配置导航链接

to="/path/参数值"

③ 对应页面组件接收传递过来的值

$route.params.参数名

3.2. 完整代码

 3.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')

3.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>

3.2.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>

3.2.4. Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button>搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/王哲晓">王哲晓</router-link><router-link to="/search/学习Vue">学习Vue</router-link><router-link to="/search/想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link></div></div>
</template><script>
export default {name: 'FindMusic'
}
</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>

3.2.5. 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: '/home', component: Home },{ path: '/search/:words', component: Search }]
})export default router

四、动态路由参数可选符

我们在使用动态路由传参的方式时 path: "/search/:words"。 如果我们不传递参数，那么将会匹配不到到组件，页面显示空白。因为 /search/:words 表示必须要传参数。如果我们不想传参数也希望能匹配，可以加个可选符 "?"

在动态路由传参代码的基础上稍做调整：

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: '/home', component: Home },{ path: '/search/:words?', component: Search }]
})export default router