蒟蒻のJAVA小窝（VUE）更新v0.2

给自己开个坑，填期未定—2020.03.26
2020.03.30 更新内容—在使用动态路由或者编程式的路由时，会有这样一个问题，路由切换后，页面不切换，解决方法：
使用watch监听路由的变化，并做数据的覆盖处理

<template>
    //  两种方式触发切换
　　<!--方式一：通过点击事件的切换-->
    <div v-for="(item,index) in theshow.recommend_courses" @click="toaimcourse(item)"><a href="javascript:vild(0);">{{item.title}}</a></div>
            <!--方式二：通过动态路由的切换-->
            <router-link v-for="(item,index) in theshow.recommend_courses" :to="{ name: 'coursedetail', params: { id:item.id }}">{{item.title}}</router-link>

</template>


<script>
   export default {
        name: "vcoursedetail",
        data(){
            return {
                showdetail:this.$store.state.allCourseDetail,
                theshow:'',
                currcourse:'',
                courseall:this.$store.state.allCourse,
                descurl:'',
                charperurl:''
            }
        },
        created(){
            this.courseshowdetail(this.$route.params.id);
            this.getcurrentcourse(this.$route.params.id);
        },
        methods:{
            courseshowdetail(nid){

                for (var i=0;i<this.showdetail.length;i++){
                    if (this.showdetail[i].course.id === nid){
                        this.theshow = this.showdetail[i];
                        return this.showdetail[i]
                    }
                }
            },
                 getcurrentcourse(nid){

                for (var i=0;i<this.courseall.length;i++){
                    if (this.courseall[i].id === nid){
                        this.currcourse = this.courseall[i].title;
                        this.descurl = "/course/coursedetail/"+nid;
                        this.charperurl = '/course/coursedetail/'+nid+'/charper';
                        console.log(this.descurl,'文章摘要的url');
                        return this.courseall[i]
                    }
                }
            },
            toaimcourse(item){
                this.$router.push({ name: 'coursedetail', params: { id:item.id }})
            }
        },
        computed:{

        },
        watch:{
            "$route"(to,from){
                  this.courseshowdetail(to.params.id);
            　　this.getcurrentcourse(to.params.id);
            }
        }
    }

</script>

我们也可以做一个全局的路由操作，比如：在每个组件加载或者路由切换时，判断有没有登录.

v0.2—2020.04.01
组件注册一次 不用再重复操作

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'
export default
 {
      components: {
        BaseButton,
        BaseIcon,
        BaseInput
      }
 }
<BaseInput v-model="searchText" @keydown.enter="search"/>
<BaseButton @click="search">
    <BaseIcon name="search"/>
</BaseButton>

开发过程中我们每一次用到UI组件的时候,都得先import,然后声明components,很繁琐!！！所以最好优化:
　　借助神奇webpack,使用require.context()方法来创建自己的(模块)上下文,从而实现自动台的require组件.
　　这个方法需要3个参数:要搜索的文件夹目录,是否还应该搜索他的子目录,以及一个匹配文件的正则表达式.
　　我们在components文件夹添加一个叫global.js的文件,在这个文件里借助webpack动态将需要的基础组件统统打包进来.

import Vue from 'vue'
function capitalizeFirstLetter(string) {  
  return string.charAt(0).toUpperCase() + string.slice(1)
}
const requireComponent = require.context(  '.', false, /\.vue$/)
 //找到components文件夹下以.vue命名的文件

requireComponent.keys().forEach(fileName => {  
  const componentConfig = requireComponent(fileName)  
  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')  
  )  
//因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
Vue.component(componentName, componentConfig.default || componentConfig)})

最后我们在main.js中import ‘components/global.js’，然后我们就可以随时随地使用这些基础组件，无需手动引入了。。。