路由的query参数
传递参数
<!-- <router-link to="/home/message/detail?id=666&title=你好啊">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>冒号to先转换成js语句，然后再使用模板字符串
接收参数
$route.query.id
$route.query.title案例
src/router/index.js
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component: News
},
{
path: 'message',
component: Message,
children: [
{
path: 'detail',
component: Detail
}
]
}
]
}
]
})src/pages/Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- <router-link to="/home/message/detail?id=666&title=你好啊">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message',
data() {
return {
messageList: [
{ id: '001', title: '消息001' },
{ id: '002', title: '消息002' },
{ id: '003', title: '消息003' },
]
}
}
}
</script>
src/pages/Detail.vue
<template>
<ul>
<li>消息编号：{{ $route.query.id }}</li>
<li>消息标题：{{ $route.query.title }}</li>
</ul>
</template>
<script>
export default {
name: 'Detail',
}
</script>
命名路由
作用：可以简化路由的跳转
src/router/index.js
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes: [
{
name:'guanyu',
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component: News
},
{
path: 'message',
component: Message,
children: [
{
name:'xiangqing',//命名路由
path: 'detail',
component: Detail
}
]
}
]
}
]
})src/pages/Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- <router-link to="/home/message/detail?id=666&title=你好啊">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
// path:'/home/message/detail',
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message',
data() {
return {
messageList: [
{ id: '001', title: '消息001' },
{ id: '002', title: '消息002' },
{ id: '003', title: '消息003' },
]
}
}
}
</script>
params参数
src/router/index.js
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes: [
{
name:'guanyu',
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component: News
},
{
path: 'message',
component: Message,
children: [
{
name:'xiangqing',
path: 'detail/:id/:title', //使用占位符声明接收params参数
component: Detail
}
]
}
]
}
]
})src/pages/Detail.vue
<template>
<ul>
<li>消息编号：{{ $route.params.id }}</li>
<li>消息标题：{{ $route.params.title }}</li>
</ul>
</template>
<script>
export default {
name: 'Detail',
}
</script>
src/pages/Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- <router-link to="/home/message/detail/666/你好啊">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message',
data() {
return {
messageList: [
{ id: '001', title: '消息001' },
{ id: '002', title: '消息002' },
{ id: '003', title: '消息003' },
]
}
}
}
</script>
特别注意：路由携带params参数，若使用to的对象写法，则不能使用path配置项，必须使用name配置
路由的props配置
src/route/index.js
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes: [
{
name:'guanyu',
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component: News
},
{
path: 'message',
component: Message,
children: [
{
name:'xiangqing',
path: 'detail/:id/:title', //使用占位符声明接收params参数
component: Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合都会通过props传给Detail组件
// props:{a:'100',b:'1'},
//第二种写法：props值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true,
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
return{
id:$route.query.id,
title:$route.query.title
}
}
}
]
}
]
}
]
})src/pages/Detail.vue
<template>
<ul>
<li>消息编号：{{ id }}</li>
<li>消息标题：{{ title }}</li>
</ul>
</template>
<script>
export default {
name: 'Detail',
props:['id','title']
}
</script>
src/pages/Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- <router-link to="/home/message/detail/666/你好啊">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message',
data() {
return {
messageList: [
{ id: '001', title: '消息001' },
{ id: '002', title: '消息002' },
{ id: '003', title: '消息003' },
]
}
}
}
</script>
