vue-cli（五）

中央事件总线bus挂载原型链上

首先，在main.js中对Vue实例进行挂载

new Vue({
  render: h => h(App),
  router,
  //在创建前指向bus
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
  
}).$mount('#app')

第二：修改FirstBus中传参的方式

通过$emit的方式给其他组件传参

methods:{
        eventStr(){
            // bus.$emit("sendVal",this.str);
            this.$bus.$emit("sendVal",this.str);
        }
    }

第三：修改second中接收参数的方式

接收完后对组件进行销毁

export default{
    name:"SecondBus",
    mounted(){
        this.$bus.$on("sendVal",(value)=>{
            console.log("second中接收的value：",value);
        })
    },
    destroyed(){
        this.$bus.$off("sendVal");
    }
}

动态路由传参

添加动态路由到index.js中，因为我们本身就是要通过路由进行传参嘛。

const router = new VueRouter({
    routes:[
        {path:"/",component:ParentSlot},
        {path:"/home",component:HomeDemo},
        //动态路由的传递链接
        {
            path:"/newscon/:id/:title",
            component:NewsCon
        }
    ]
})

传递的页面：

其中，路由传参使用router-link标签，to是传递数据的路径，因为路径是动态获取的，所以使用v-bond：，然后路径使用 `` 包裹起来。

<template>
  <div class="news">
    <ul>
        <li v-for="value in newsarr" :key="value.id">
            <router-link :to="`/newscon/${value.id}/${value.title}`">
              {{ value.title }}
            </router-link>
        </li>
    </ul>
  </div>
</template>

<script>
export default{
    name:"NewsDemo",
    data(){
        return {
            newsarr:[
                {id:111,title:"新闻1"},
                {id:222,title:"新闻2"},
                {id:333,title:"新闻3"},
            ]
        }
    }
}

</script>

接收数据的页面

直接通过路由获取传递的数据

<template>
  <div class="newscon">
    <h1>新闻详情</h1>
    <h3>
        【params】 id:{{ this.$route.params.id }}
        title:{{ this.$route.params.title }}
    </h3>
  </div>
</template>

<script>
export default{
    name:"NewsCon",
    mounted(){
        console.log("当前路由",this.$route);
    }
}
</script>

静态路由传参

相对动态路由传参还需要改配置，静态路由就不需要，所以相对来说，静态路由比动态路由好一些。

在传递数据页面中

 <!-- 静态路由 -->
     <ul>
        <li v-for="value in newsarr" :key="value.id">
            <router-link :to="{path:`/newscon`,query:{id:value.id,
                title:value.title}}">
              {{ value.title }}
            </router-link>
        </li>
     </ul>

在路由配置文件中

        //静态路由
        {
            path:"/newscon",
            component:NewsCon,
        },

编程式路由（常用的）

不但可以传递参数，还可以解决一些事务。

所以我们传参通常使用编程式路由。

这里就是由编程式路由的传递数据的的主页。

    <!-- 编程式路由 -->
     <ul>
        <li v-for="value in newsarr" :key="value.id">
            <p>{{ value.title }}</p>
            <button @click="gotoCon(value.id,value.title)">查看详情</button>

        </li>
     </ul>

方法的实现

methods:{
        gotoCon(id,title){
            //通过name传参，params接收
            this.$router.push({
                name : "NewsCon",
                params : {id,title}
            })
            //将数据保存在本地存储中
            localstorage.setItem( "newsdata" ,id)

        }
    }

在显示页面接收数据

<template>
  <div class="newscon">
    <h1>新闻详情</h1>
    <h3>
        【params】 id:{{ newsId }}
        title:{{ this.$route.params.title }}
    </h3>
    <hr>
    <h3>
        【query】 id:{{ this.$route.query.id }}
        title:{{ this.$route.query.title }}
    </h3>
  </div>
</template>

<script>
export default{
    name:"NewsCon",
    data(){
        return{
            newsId:""
        }
    },
    mounted(){
        console.log("当前路由",this.$route);
        this.newsId = localStorage.getItem("newsdata");
    }
}
</script>

登录

全局前置路由守卫

在执行点击切换页面前执行的操作

//全局前置路由守卫
router.beforeEach((to,from,next)=>{
    if(to.meta.isLogin){
        if(localStorage.getItem("username") == null){
            next("/login");
        }else{
            next();
        }
    }else{
        next();
    }
})

同时需要在路由上添加自定义变量

像这样，在meta块中添加isLogin变量，并设置为true，即，如果isLogin中没有值的话就不给通过

        {
            path:"/news",
            component:NewDemo,
            meta:{
                isLogin:true
            }
        },
        {
            path:"/main",
            component:MainDemo,
            meta:{
                isLogin:true
            }
        },
        //静态路由
        {
            path:"/newscon",
            name:"NewsCon",
            component:NewsCon,
            meta:{
                isLogin:true
            }
        },

全局后置路由守卫

同理，在切换界面之后进行的操作。

        {
            path:"/mv",
            component:MvDemo,
            meta:{
                isLogin:true,
                title:"mv组件"
            }
        },

  
  router.afterEach((to)=>{
    document.title = to.meta.title|| "测试网站";
})

这里的是点击页面之后就更改名字，如果有title，就改为title，不然就改为测试网站。

像这里的mv点击之后就会变成mv组件。