vue-router-8-路由组件传参

在组件中使用$route会使之与其对应路由形成高度耦合，使用props解耦

const User = {
  props: ['id'],
  template: '<div>User{{ id }}</div>' //$route.params.id
}
const router = new VueRouter({
  routes: [
　　 //布尔模式，如果props被设置为true，route.params将会被设置为组件属性。
    { path: '/user/:id', component: User, props: true }

　　 // 如果props是一个对象，它会被按原样设置为组件属性。

    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }

//如果props是一个对象，它会被按原样设置为组件属性。当props是静态的时候有用
const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

//函数模式，可以将参数转换成另一种类型，将静态值与基于路由的值结合
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

  ]
})

 

转载于:https://www.cnblogs.com/avidya/p/7648860.html