- 原始方式使用 $route获取
// 入口
<router-link to="/header/3">123</router-link>
// 规则
routes： [
{
path： '/header/：id'，
component： header，
}
]
// 获取参数
const header = {
template： `<p>header {{ $route.params.id }} </p>`
}
- 布尔模式
// 入口
<router-link to="/header/3">123</router-link>
// 规则
routes： [
{
path： '/header/：id'，
component： header，
// 如果 props 被设置为 true，route.params 将会被设置为组件属性
props： true
}
]
// 获取参数
const header = {
// 参数 id 当成参数
props： ['id']，
template： `<p>header {{ id }} </p>`
}
- 对象模式
// 入口
<router-link to="/header">123</router-link>
// 规则
routes： [
{
path： '/header'，
component： header，
props： { foo： '0000' }
}
]
// 组件
const header = {
props： ['foo']，
template： `<p>header {{ foo }} </p>`
}
- 函数模式
// 同对象模式一样
// 区别是props值不一样
props： to => {
return { foo： '0000' }
}
- 注意 ： 对象模式和函数模式，参数 在props里，所以声明式导航那里就不要传参了
11-组件传参.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
方式1 to='/one/4' path='/one/:id?' 组件:$route.params.id
事件 : this.$route.params.id
方式2 : 布尔模式 路由规则里 props:true
将参数id 作为组件的属性存在
- props:true
- 组件内 : props:['id']
- 使用: {{ id }}
方式3 : 对象模式
- props : { aaa : 'bbb' }
- props: ['aaa']
- {{ aaa }}
方式4 : 函数模式
- props : to => { return { aaa : 'ccc' } }
- props:['aaa']
- {{ aaa }}
-->
<div id="app">
<!-- 1. 入口 -->
<router-link to="/one">one</router-link>
<!-- 4. 出口 -->
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3. 组件
const One = {
props: ['id', 'aaa'],
template: `<div>one组件 {{ aaa }}</div>`
}
// 实例化
const router = new VueRouter({
// 2. 规则
routes: [
// props : true 将id参数作为组件的属性存在
// { path: '/one/:id', component: One, props: true }
// 将aaa 作为 组件的属性存在
// { path: '/one', component: One, props: { aaa: 'bbb' } }
// 函数
{
path: '/one',
component: One,
props: to => {
return {
aaa: 'ccc'
}
}
}
]
})
const vm = new Vue({
router,
el: '//app',
data: {}
})
</script>
</body>
</html>