路由组件传参

路由组件传参

• router.query 参数 转换成 组件 props 参数
• router.params 参数 转换成 组件 props 参数

// 走这个路由的会将参数设置成组件的 props 参数
// 布尔模式
const routes = [{ path: '/user/:id', component: User, props: true }]

// 默认走这个路由的会将参数设置成组件的 props 参数
// sidebar页面走这个路由不会将参数设置成组件的 props 参数
const routes = [{ 
    path: '/user/:id', 
    component: User, 
    // 对象模式
    props: { default: true, sidebar: false } 
  },  
  {
    path: '/search',
    component: SearchUser,
    // 函数模式
    props: route => ({ query: route.query.q })
  }
               
]

const User = {
  // 添加一个与路由参数 :id 完全相同的 prop 名 id
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}