Vue路由传参、解耦

对于 router-link 来讲，有两种传参方式：

1.

<router-link :to="{name: 'About', params: { id: 340 } }">About</router-link>

对应效果：

params不出现在url里面。可以使用代码查询：

1.   $route.params
2.   this.$route.params

2.

<router-link :to="{path: 'about', query: { id: 340 } }">About</router-link>

对应效果：

query的参数出现在url里面。可以使用代码查询：

1.   $route.query
2.   this.$route.query

为什么要使用解耦？如何使用解耦？

传统的查询，通常使用以下代码。

<div>{{$route.params.id}}</div>

但是存在一个问题。如果同一个url下面有多个component渲染，就很容易体现出来，3个组件的$route都依赖于同一个路由。让每个模块之间形成了紧密联系。我们称之为高耦合。(注意：当同一路由，同时渲染多个视图时。name变成了每个组件的命名)

  {
    path: '/about',
    component: {
      One,
      Tow,
      Tree
    }
  }

为了让每个模块更加独立，实现低耦合。我们可以使用props属性来实现：

  {
    path: '/about',
    component: {default,Two,Tree},
    props: {default: true,Two: true,Tree: false},
  }

通过props来控制每个组件，是否要继承这样的参数。从而达到解耦的目的。参数params，会被传入到组件的props里面去。最后，在html标签，写法就要改变为：

<template>
  <div class="about">
    <div>{{id}}</div>
  </div>
</template>

<script>
export default {
  props: ['id']
}
</script>

over~