传递参数
{{ m.title }}
冒号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
-
{{ m.title }}
src/pages/Detail.vue
- 消息编号:{{ $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: [
{
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
-
{{ m.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: [
{
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
- 消息编号:{{ $route.params.id }}
- 消息标题:{{ $route.params.title }}
src/pages/Message.vue
-
{{ m.title }}
特别注意:路由携带params参数,若使用to的对象写法,则不能使用path配置项,必须使用name配置
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
- 消息编号:{{ id }}
- 消息标题:{{ title }}
src/pages/Message.vue
-
{{ m.title }}