1、routerLinkTo 樣式設定

首先，點選routerlink標籤如下圖：新增：router-link-active,router-link-exact-active兩個類的樣式

router-link-active及router-link-exact-active區別：

有四種路徑如下：

1. <router-link to='/'>
2. <router-link to='/a'>
3. <router-link to='/b'>
4. <router-link to='/ab'>

router-link-active相當於模糊匹配，及2或3點選，1號也會新增router-link-active樣式；點選4號，1和2也會新增該類；

修改vue預設的routerLink樣式：

方法一：設定區域性
直接在相關元件中設定想要的router-link-active或router-link-exact-active樣式

<style>
    .router-link-exact-active{
        border-bottom:2px solid #1989fa;
    }
</style>

方法二：設定全域性
在router/index.js 中設定全域性的linkActiveClass
linkActiveClass:myActive

詳細可以參照文件進行設定：https://router.vuejs.org/zh/api/#base

2、在vue專案結構中匯入全域性的js函式

以時間格式化函式為例：

首先在vuecli專案結構中建立相關的js檔案：

//E:\vue\platform\src\assets\js\DateFormat.js 
/**************************************時間格式化處理************************************/
function dateFormat(fmt, date) {
    var o = {
        "M+": date.getMonth() + 1, //月份   
        "d+": date.getDate(), //日   
        "h+": date.getHours(), //小時   
        "m+": date.getMinutes(), //分   
        "s+": date.getSeconds(), //秒   
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度   
        "S": date.getMilliseconds() //毫秒   
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    }
    return fmt;
}

export {
    dateFormat//匯出
}
 

其次在main.js檔案中進行全域性配置，把它掛在到vue的原型中去：

//main.js
import { dateFormat } from './assets/js/DateFormat'
Vue.prototype.$dateFormat = dateFormat

最後在需要呼叫的地方直接進行引用：ctime:this.$dateFormat('yyyy-MM-dd hh:mm:ss',new Date())就完成對時間的格式化處理

3、vue中slot的用法

slot：插槽，子元件中存在一個對父元件插入內容的佔位

一、不具名插槽

Child.vue:

<template>
    <div>
        <p>這裡是子元件</p>
        <slot>
            父元件的佔位，父元件沒有插入內容會顯示
        </slot>
    </div>
</template>

Parent.vue:

<template>
    <div>
        <Child>
            <p>父元件插入內容</p>
        </Child>
    </div>
</template>
<script>
import Child from './Child'
export default {
    components:{ Child }

}
</script>

顯示：
這裡是子元件

父元件插入內容

二、具名插槽

Child.vue:

<template>
    <div>
        <p>這裡是子元件</p>
        <slot name="slot1">//具體名字
            這裡是slot1
        </slot>
        <slot>預設的slot</slot>
        <slot name="slot2">
            這裡是slot2
        </slot>
    </div>
</template>

Parent.vue

<template>
    <div>
        <Child>
            <p slot="slot2">父元件插入內容</p>//匹配名字相同的slot插槽，沒有名字則匹配預設的slot插槽
        </Child>
    </div>
</template>
<script>
import Child from './Child'
export default {
    components:{ Child }

}
</script>

顯示：
這裡是子元件

這裡是slot1 預設的slot
父元件插入內