蒟蒻の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’，然後我們就可以隨時隨地使用這些基礎組件，無需手動引入了。。。