Vue-cli初始路由

路由官网:https://router.vuejs.org/zh/

1.安装

npm install vue-router

2. 导入

import Vue from 'vue'
//导入路由
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)

3. 创建路由器

// 创建一个路由器对象
export default new VueRouter({
    //定义当前路由器对象管理的路由信息
    //每一个路由信息就是一个对象
    routes:[{
        //路由路径
        path:'/',
        //路由名称
        name:'Index'
        //路由组件
        component:Index
    }]
})

4. 配置路由器

// 导入当前项目中创建的路由器对象
import router from './router'
new Vue({
  render: h => h(App),
  // 在Vue的实例上，配置一个路由器对象
  router
}).$mount('#app')

5. 使用路由

1、路由组件跳转

router-link是路由链接组件，用于跳转路由。通过传入 to 属性指定链接，即要显示的内容。router-link默认会被渲染成一个 <a> 标签。
router-view是路由视图组件，用于呈现路由页面。

<router-link to="/">首页</router-link>
<router-view></router-view>

2、编程式理由跳转

$route返回的是当前路由信息$ router就是当前项目中的路由器对象，它的push方法，用于跳转路由
replace方法，也是用于跳转路由。
push方法是在浏览器的历史记录中，添加一个路由信息
replace方法是在浏览器的历史记录中，替换历史记录里面的最近一条地址

<button @click="gotoAbount">关于</button>&nbsp;
<button @click="gotoNews">新闻</button>

    // 编程式路由跳转，可以在跳转之前，做各种验证，比如判断权限等等
    gotoAbount(){
      // $route返回的是当前路由信息
      // $router返回的是当前vue实例里面的路由器对象
      // 通过push方法，跳转路由，并将路由地址添加到历史记录
      // 通过replace方法，也是跳转路由，它用当前地址替换厉害记录里面的最近一条地址
      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

导入

全局导入

// 导入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
// 因为swiper是插件，所以要use
Vue.use(VueAwesomeSwiper)

局部导入

// 导入swiper的组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
export default {
    // 注册组件
    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>
    <!-- 分页器 -->
    <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的配置选项
        swiperOptions: {
            // 指定分页器
            pagination: {
                //指定分页器的容器
                el: ".swiper-pagination",
                //点击分页器的指示点分页器会控制Swiper切换
                clickable:true
            },
            // 配置衔接滑动
            loop:true,
            // 配置自动播放
            // autoplay:true
            autoplay:{
                //自动播放
                autoplay:true,
                //设置间隔时间
                delay:3000,
                // 用户操作swiper之后，是否禁止autoplay
                disableOnInteraction:false
            },
            // slide的切换效果
            effect:'coverflow',
            // 箭头
            navigation:{
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        },
    };
},