(Vue-cli)二、初始路由vue-router&安装使用sw
2021-12-16 本文已影响0人
Jinx要睡懒觉
1. Vue Router路由
Vue Router是Vue.js官方的路由管理器，可以实现页面的跳转。
(1) 安装路由
npm install vue-router
(2) 导入vue-router
为了使入口文件main.js尽量小，所以通常会在src文件夹中创建一个新的router文件夹，然后在该文件夹中创建index.js文件，通常将路由相关的所有信息放在该文件夹中。
import Vue from 'vue' //导入vue
import VueRouter from 'vue-router' //导入路由
Vue.use(VueRouter) //使用路由
(3) 创建路由器
将创建的路由对象使用export default直接导出，然后再在main.js中导入当前项目中的路由器对象 import router from ' ./router '
// 导入页面组件
import Home from './pages/Home.vue'
import List from './pages/List.vue'
// 创建路由器对象
export default new VueRouter({
// 定义当前路由器对象管理的路由信息
routes: [
// 每一条路由信息，就是一个对象
{
// 路由路径
path:'/home',
// 路由名称
name:'home',
// 路由组件
component:Home
},
{
path: '/list',
name: 'list',
component: List
}
]
})
(4) 配置路由器
// 导入当前项目中创建的路由器对象
import router from './router'
new Vue({
render: h => h(App),
// 在Vue的实例上，配置一个路由器对象
router:router
}).$mount('#app')
此时路由的准备工作已经完成 <(￣︶￣)↗[GO!]**
(5) 使用路由
在App.vue中引入路由视图组件，用于呈现路由页面 <router-view></router-view>
在App.vue中引入路由链接组件，用于跳转路由 <router-link></router-link>
① 路由组件跳转
router-link是路由链接组件，用于跳转路由。通过传入 to 属性指定链接， 即要显示的内容。router-link默认会被渲染成一个 <a> 标签。
router-view是路由视图组件，用于呈现路由页面。
<router-link to="/home">首页</router-link>
<router-link to="/list">列表</router-link>
<router-view></router-view>
② 编程式路由跳转
$router 返回的是当前vue实例里面的路由器对象，给router-link标签绑定一个点击效果方法，通过 push 方法可以跳转路由，此种方法不可以连续点击同一个路由对象，会报错，解决的方式如下，添加判断条件：如果所要点击的页面的路由路径不是当前页面的路由路径，则点击有效。
编程式路由跳转，可以在跳转之前，做各种验证，比如判断权限等等。
$route返回的是当前路由信息。
$router是当前vue实例里面的路由器对象。
push()通过push方法，跳转路由，并将路由地址添加到历史记录。需要注意，不能反复push同一个路由地址。
replace()通过repalce方法，跳转路由，它将当前地址替换历史记录里的最近一条地址。
<button @click="gotoHome">首页</button>
<button @click="gotoList">列表</button>
<router-view></router-view>
methods: {
gotoHome() {
if (this.$route.path !== "/home") {
this.$router.push("/home");
}
},
gotoList() {
if (this.$route.path !== "/list") {
this.$router.push("/list");
}
}
}
2.安装使用swiper插件(低版本)
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
(1) 安装
npm install swiper@5 vue-awesome-swiper@4
(2) 导入
① 全局导入
在入口文件main.js中全局导入。
import VueAwesomeSwiper from 'vue-awesome-swiper' // 导入swiper
import 'swiper/css/swiper.css' // 导入swiper的样式
Vue.use(VueAwesomeSwiper) // 因为swiper是插件，所以要use
② 局部导入
在需要使用swiper插件的页面组件(views下的xxx.vue)中引入。
局部导入的优势：只有在页面组件使用swiper插件时，才会引入插件，起到一个懒加载作用；全局导入不管是否使用，都会引入。局部更有利于性能优化，全局更方便开发。
// 导入swiper的组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
export default {
// 注册组件
components: {
Swiper,
SwiperSlide
}
}
(3) 使用
<div class="box">
<!-- swiper组件，options属性设置配置选项 -->
<swiper :options="swiperOptions">
<!-- swiper组件的每一项 -->
<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>
</div>
data() {
return {
// 定义swiper的配置选项
swiperOptions: {
// 指定分页器
pagination: {
// 指定分页器的容器
el: ".swiper-pagination",
// 点击分页器的指示点分页器会控制Swiper切换
clickable:true
},
// 配置自动播放
// autoplay:true
autoplay:{
//自动播放
autoplay:true,
// 设置间隔时间
delay:3000,
// 用户操作swiper之后，是否禁止autoplay
disableOnInteraction:false
},
// 配置衔接滑动
loop:true,
// 箭头
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// slide的切换效果
effect:'cube',
},
}
},
};
3. 安装使用Echarts
(1) 在创建的项目demo安装
npm install echarts --save
(2) 在需要使用图表库的组件中导入echarts对象
import * as echarts from 'echarts';
(3) 在需要使用图表库的组件中准备容器
<div class="charts">
<h3>在vue项目中使用ECharts</h3>
<div id="main"></div>
</div>
(4) 选择示例图
在官网找到想要的示例，下载示例。
(5) 引入 ECharts
基于准备好的dom初始化echarts实例，绘制图表。因为该项目是基于vue，所以需要在mounted生命周期中进行这一步（获取dom，需要在页面挂载完成后进行）。
① 折线图实例
在需要使用图表库的组件中export default对外输出本模块变量
通过axios获取后台数据。（注意：axios需要先安装，再导入）
组件中代码：
<script>
// 导入echarts
import * as echarts from 'echarts';
// 导入axios
import axios from 'axios'
export default {
name: "List",
data() {
return {
// 定义一份数据
list:[]
}
},
methods: {
// 加载数据的方法
async loadData(){
// 向后台发送请求获取数据
let {data} = await axios.get('data/data1.json')
this.list = data
// 调用渲染数据方法
this.showData()
},
// 渲染数据的方法
showData() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
// 绘制图表
myChart.setOption({
// 标题
title: {
text: '收入记录'
},
// 提示框组件
tooltip: {
trigger: 'axis'
},
// 图例组件
legend: {
data: this.list.map(r=>r.name)
},
// 网格
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// 网格空间是否包含左侧的文本
containLabel: true
},
// 工具栏
toolbox: {
// 各工具配置项
feature: {
// 保存为图片
saveAsImage: {}
}
},
// x轴数据
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
// y轴数据
yAxis: {
type: 'value'
},
// 系列
series: this.list.map(r=>{
return{
name:r.name,
type:'line',
data:r.money.map(m=>m.money)
}
})
});
}
},
// 页面挂载完成
mounted() {
this.loadData()
},
};
</script>
public文件下data文件下data1.json数据：
[
{
"name":"鹿晗",
"money":[
{
"data":"周一",
"money":2000
},
{
"data":"周二",
"money":5000
},
{
"data":"周三",
"money":8000
},
{
"data":"周四",
"money":3500
},
{
"data":"周五",
"money":1500
},
{
"data":"周六",
"money":6700
},
{
"data":"周日",
"money":2000
}
]
},
{
"name":"张杰",
"money":[
{
"data":"周一",
"money":1200
},
{
"data":"周二",
"money":2300
},
{
"data":"周三",
"money":800
},
{
"data":"周四",
"money":4500
},
{
"data":"周五",
"money":2300
},
{
"data":"周六",
"money":1800
},
{
"data":"周日",
"money":2700
}
]
},
{
"name":"王明",
"money":[
{
"data":"周一",
"money":200
},
{
"data":"周二",
"money":500
},
{
"data":"周三",
"money":800
},
{
"data":"周四",
"money":350
},
{
"data":"周五",
"money":5000
},
{
"data":"周六",
"money":6500
},
{
"data":"周日",
"money":3700
}
]
}
]
② 饼图实例
<script>
// 导入echarts
import * as echarts from 'echarts';
export default {
name: "List",
data() {
return {
list:[
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
};
},
mounted() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("container"));
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
// name：数据项名称
// value：数据值
...this.list.map((r) => {
return {
value: r.value,
name: r.name,
};
}),
]
}
]
});
},
};
</script>
