vue踩坑：slot插槽，vue路由传值

slot 插槽。主要功能就是实现内容分发，简单来说，就好像把一个位置放在组件里，父组件调用子组件时，传内容（可以是一个标签）过去，组件相应的显示。如果父组件没有传值，就显示设置好的默认内容。

比如 ：

父组件中：

<template>
   <div class="home">
      <appHeader ></appHeader>
      <appSection ></appSection>
      <appFooter >
          <p slot="footmess">传递到slot的内容</p>
      </appFooter>     
   </div>
</template>

子组件中：

<template>
   <div class="app-footer">
     <div class="copyright">
         demo footer
       <slot name="footmess">默认内容</slot> 
     </div>
   </div>
</template>

显示结果：

通过slot 标签接受传递的p标签内容；

如果：父组件并没有传递内容给子组件，则会显示slot标签里设置的默认信息

父组件：

<template>
   <div class="home">
      <appHeader ></appHeader>
      <appSection ></appSection>
      <appFooter >
      </appFooter>     
   </div>
</template>

子组件：

<template>
   <div class="app-footer">
     <div class="copyright">
        demo footer
       <slot name="footmess">默认内容</slot> 
     </div>
   </div>
</template>

显示效果：

ps: 只传递单个标签，或没有标签，只有内容时，子组件放置一个slot标签就可以接收，不用设置name之类的属性，当有多个标签传递过去的时候，就要通过name属性，将slot标签和传递来的标签对应。

此外，父组件还可以传全局注册的组件到slot

router传值：

router有好几种；较为简单的就是直接再router-link 标签里通过to属性传值

    <router-link  :to="{name:'add_supplier',params:{user:'全国代理'}}" ><el-menu-item index="5-1">新增全国代理</el-menu-item></router-link>
    <router-link  :to="{name:'add_store',params:{user:'门店'}}"><el-menu-item index="5-2">新增门店</el-menu-item></router-link>

然后在去的页面中拿到值：传的值不需要用什么方法接收，直接就可以使用，this.$route.params.user,就是我传来的user的值

在代码中我传的值 user:'全国代理'，都是可以用变量代替的。

ps：如果router传值到同一个页面的话，如上图，add_supplier,add_store,是同一个页面。router中index.js配置如下：

import add_supplier from '@/components/add_list'
import add_store from '@/components/add_list'

     {
      path: '/add_supplier',
      name: 'add_supplier',
      component: add_supplier
    },
     {
      path: '/add_store',
      name: 'add_store',
      component: add_store
    }

中间代码省略了，只贴了重要代码。使用中路由没有发生变化，因为，只有在第一次进入的时候会因为created执行。在这两个页面之间进行切换，是不会触发这个执行的。所以我们可以监听路由的变化，如果变化了更改掉页面的内容。

解决办法：

   watch:{
      "$route":function(to,from){
      //from 对象中包含当前地址
      //to 对象中包含目标地址
      //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
      this.add_type=this.$route.params.user,//这之后的代码用于路由改变了，要执行的动作
      this.ruleForm.rankChoose=this.$route.params.user

}
}