路由官網(wǎng):https://router.vuejs.org/zh/

1.安裝

npm install vue-router

2. 導(dǎo)入

import Vue from 'vue'
//導(dǎo)入路由
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)

3. 創(chuàng)建路由器

// 創(chuàng)建一個(gè)路由器對(duì)象
export default new VueRouter({
    //定義當(dāng)前路由器對(duì)象管理的路由信息
    //每一個(gè)路由信息就是一個(gè)對(duì)象
    routes:[{
        //路由路徑
        path:'/',
        //路由名稱
        name:'Index'
        //路由組件
        component:Index
    }]
})

4. 配置路由器

// 導(dǎo)入當(dāng)前項(xiàng)目中創(chuàng)建的路由器對(duì)象
import router from './router'
new Vue({
  render: h => h(App),
  // 在Vue的實(shí)例上，配置一個(gè)路由器對(duì)象
  router
}).$mount('#app')

5. 使用路由

1、 路由組件跳轉(zhuǎn)

router-link是路由鏈接組件，用于跳轉(zhuǎn)路由。通過(guò)傳入 to 屬性指定鏈接， 即要顯示的內(nèi)容。router-link默認(rèn)會(huì)被渲染成一個(gè) <a> 標(biāo)簽。
router-view是路由視圖組件，用于呈現(xiàn)路由頁(yè)面。

<router-link to="/">首頁(yè)</router-link>
<router-view></router-view>

2、編程式理由跳轉(zhuǎn)

router就是當(dāng)前項(xiàng)目中的路由器對(duì)象，它的push方法，用于跳轉(zhuǎn)路由
replace方法，也是用于跳轉(zhuǎn)路由。
push方法是在瀏覽器的歷史記錄中，添加一個(gè)路由信息
replace方法是在瀏覽器的歷史記錄中，替換歷史記錄里面的最近一條地址

<button @click="gotoAbount">關(guān)于</button>&nbsp;
<button @click="gotoNews">新聞</button>

    // 編程式路由跳轉(zhuǎn)，可以在跳轉(zhuǎn)之前，做各種驗(yàn)證，比如判斷權(quán)限等等
    gotoAbount(){
      // $route返回的是當(dāng)前路由信息
      // $router返回的是當(dāng)前vue實(shí)例里面的路由器對(duì)象
      // 通過(guò)push方法，跳轉(zhuǎn)路由，并將路由地址添加到歷史記錄
      // 通過(guò)replace方法，也是跳轉(zhuǎn)路由，它用當(dāng)前地址替換厲害記錄里面的最近一條地址
      if(this.$route.path!=='/about'){
        this.$router.push('/about')
      }
    },
    gotoNews(){
      if(this.$route.path!=='/news'){
        this.$router.push('/news')
      }
    }

6. swiper插件(低版本)

安裝

npm install swiper@5 vue-awesome-swiper@4

導(dǎo)入

全局導(dǎo)入

// 導(dǎo)入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 導(dǎo)入swiper的樣式
import 'swiper/css/swiper.css'
// 因?yàn)閟wiper是插件，所以要use
Vue.use(VueAwesomeSwiper)

局部導(dǎo)入

// 導(dǎo)入swiper的組件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// 導(dǎo)入swiper的樣式
import 'swiper/css/swiper.css'
export default {
    // 注冊(cè)組件
    components: {
        Swiper,
        SwiperSlide
    }
}

使用

<swiper :options="swiperOptions">
    <swiper-slide>
        <img src="http://p1.music.126.net/Y6gItVxUvkbvI2cC8KVZYA==/109951166461233203.jpg?imageView&quality=89">
    </swiper-slide>
    <swiper-slide>
        <img src="http://p1.music.126.net/ypjEcAl-BXKqb2UWdau-Tw==/109951166463199078.jpg?imageView&quality=89">
    </swiper-slide>
    <swiper-slide>
        <img src="http://p1.music.126.net/_7zX4BjboCYo4KYRvpayDg==/109951166461246383.jpg?imageView&quality=89">
    </swiper-slide>
    <swiper-slide>
        <img src="http://p1.music.126.net/3Vwphalm49ewNV-lIJUBNA==/109951166461279853.jpg?imageView&quality=89">
    </swiper-slide>
    <!-- 分頁(yè)器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!--左箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <!--右箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
    <div class="swiper-button-next" slot="button-next"></div>
</swiper>

data() {
    return {
        // 定義swiper的配置選項(xiàng)
        swiperOptions: {
            // 指定分頁(yè)器
            pagination: {
                //指定分頁(yè)器的容器
                el: ".swiper-pagination",
                //點(diǎn)擊分頁(yè)器的指示點(diǎn)分頁(yè)器會(huì)控制Swiper切換
                clickable:true
            },
            // 配置銜接滑動(dòng)
            loop:true,
            // 配置自動(dòng)播放
            // autoplay:true
            autoplay:{
                //自動(dòng)播放
                autoplay:true,
                //設(shè)置間隔時(shí)間
                delay:3000,
                // 用戶操作swiper之后，是否禁止autoplay
                disableOnInteraction:false
            },
            // slide的切換效果
            effect:'coverflow',
            // 箭頭
            navigation:{
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        },
    };
},