Vue学习—命名视图-路由组件传参

一、命名视图-路由组件传参

1.命名视图

想同时展示多个视图时，并且每个视图展示不同的组件时，可以使用命名视图。

可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      components: {
    
    
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

1.路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦。

2.布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性。

{
    
    
    path: '/question/:id',
    name: 'question',
    props: true,
    component: () => import('./views/Question'),
}

3.对象模式

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

const router = new VueRouter({
    
    
  routes: [
    {
    
     
      path: '/promotion/from-newsletter', 
      component: Promotion, 
      props: {
    
     newsletterPopup: false } 
    }
  ]
})

4.函数模式

你可以创建一个函数返回 props。函数的第一个参数是 route （即$route）。

const router = new VueRouter({
    
    
  routes: [{
    
     
  	path: '/search', 
    component: SearchUser, 
    props: (route) => ({
    
     
    	query: route.query.q 
    }) }
  ]
})