Vue 路由 router-路由组件传参 (重点)
为什么要用路由组件传参呢?
在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的URL上使用,限制了灵活性。通过props来解耦。
布尔模式:如果 props 被设置为 true,route.params 将会被设置为组件属性。
核心代码:
<script>
const position = {
//布尔模式
props:['id'],
template:`
<div>position {
{id}}</div>
`
}
let router = new VueRouter({
// mode:'hash',默认值
routes:[
{
path:'/position/:id',
component:position,
props:true,//布尔模式
},
]
})
</script>
对象模式:如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。
核心代码:
<script>
const position = {
//对象模式 props为静态时有用 应用面窄
props:['id','username','age'],
template:`
<div>position-{
{username}}-{
{age}}-{
{$route.params.id}}</div>
`
}
let router = new VueRouter({
// mode:'hash',默认值
routes:[
{
path:'/position/:id',
component:position,
props:{
username:<