一截珍、路由（Vue Router）
Vue Router 是 Vue.js (opens new window)官方的路由管理器默伍。包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的囱桨、基于組件的路由配置
- 路由參數(shù)磺浙、查詢、通配符
- 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
- 細(xì)粒度的導(dǎo)航控制
- 帶有自動(dòng)激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)
- 自定義的滾動(dòng)條行為
1雕凹、安裝
npm install vue-router
2、導(dǎo)入（入口文件main.js中）
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3政冻、創(chuàng)建路由器
路由器就是配置路由信息的请琳，所謂路由就是把它當(dāng)成一個(gè)頁面的跳轉(zhuǎn)。通過路由器對(duì)象配置
（1）創(chuàng)建路由器對(duì)象 (在入口文件main.js中）
// 導(dǎo)入頁面組件
import Home from './pages/Home.vue'
import List from './pages/List.vue'
const router = new VueRouter({
// 定義路由信息數(shù)組
routes:[
// 每一條路由信息赠幕，就是一個(gè)對(duì)象
{
// 路由路徑
path:'/home',
// 路由名稱
name:'home',
// 路由組件
component:Home //Home是組件名
},
]
})
在路由器對(duì)象中需要配置跳轉(zhuǎn)頁面。（注意：所有頁面的每一個(gè)頁面組件都單獨(dú)用一個(gè)文件夾保存询筏，在src目錄中創(chuàng)建一個(gè)views或pages文件夾）
src目錄中的components和pages都是組件文件夾榕堰，前者為業(yè)務(wù)組件，后者為頁面組件
在pages文件夾中添加組件
image.png
當(dāng)我們?cè)陂_發(fā)項(xiàng)目時(shí)嫌套，可能會(huì)有很多需要跳轉(zhuǎn)的頁面逆屡，導(dǎo)致入口文件main.js中的代碼增多。在開發(fā)項(xiàng)目過程中main.js文件要盡可能的小踱讨，所以我們要把部分的代碼分離出去魏蔗。
在src目錄新建一個(gè)文件夾，一般命名為router痹筛，然后新建一個(gè)文件index.js莺治。將分離出來的代碼接收，再導(dǎo)出
// 導(dǎo)入vue庫
import Vue from 'vue'
// 導(dǎo)入路由
import VueRouter from 'vue-router'
// 使用路由
Vue.use(VueRouter)
// 導(dǎo)入Home組件
import Home from '../pages/Home.vue'
// 導(dǎo)入List組件
import List from '../pages/List.vue'
// 創(chuàng)建路由器對(duì)象
export default new VueRouter({
// 定義路由信息數(shù)組
routes:[
// 每一條路由信息帚稠，就是一個(gè)對(duì)象
{
// 路由路徑
path:'/home',
// 路由名稱
name:'home',
// 路由組件
component:Home
},
{
// 路由路徑
path:'/list',
// 路由名稱
name:'list',
// 路由組件
component:List
},
]
})
注意：main.js中的代碼被分離之后谣旁，需要在里面重新導(dǎo)入（一個(gè)文件夾中的index.js文件可以省略），文件中的組件地址也需要改動(dòng)
4滋早、配置路由器
import router from './router'
new Vue({
render: h => h(App),
// 將路由器對(duì)象傳給vue實(shí)例
router // 簡(jiǎn)寫榄审，相當(dāng)于router:router
}).$mount('#app')
5、使用路由
（1）路由組件跳轉(zhuǎn)
router-link是路由鏈接組件杆麸，用于跳轉(zhuǎn)路由搁进。通過傳入 to 屬性指定鏈接浪感， 即要顯示的內(nèi)容。router-link默認(rèn)會(huì)被渲染成一個(gè) <a> 標(biāo)簽饼问。
router-view是路由視圖組件影兽，用于呈現(xiàn)路由頁面。
<template>
<div id="app">
<router-link to="/home">首頁</router-link>
<router-link to="/list">列表</router-link>
<router-view></router-view>
</div>
</template>
（2）編程式路由跳轉(zhuǎn)
編程式路由跳轉(zhuǎn)匆瓜，可以在跳轉(zhuǎn)之前赢笨，做各種驗(yàn)證，比如判斷權(quán)限等等驮吱。
router是當(dāng)前vue實(shí)例里面的路由器對(duì)象。
push方法：用于跳轉(zhuǎn)路由左冬，在瀏覽器的歷史記錄中桐筏，添加一個(gè)路由信息。需要注意拇砰，不能反復(fù)push同一個(gè)路由地址梅忌。
replace方法：也是用于跳轉(zhuǎn)路由。它用當(dāng)前地址替換歷史記錄里面的最近一條地址除破。
<template>
<div id="app">
<button @click="gotoAbout">關(guān)于</button>
<button @click="gotoNews">新聞</button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
gotoAbout(){
if(this.$route.path!=='/about'){
this.$router.push('/about')
}
},
gotoNews(){
if (this.$route.path!=='/news') {
this.$router.push('/news')
}
}
},
}
</script>
二牧氮、swiper插件
1、安裝
npm install swiper@5 vue-awesome-swiper@4
2瑰枫、導(dǎo)入
（1）全局導(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)
（2）局部導(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
}
}
3、使用
<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的配置選項(xiàng)
swiperOptions: {
// 指定分頁器
pagination: {
//指定分頁器的容器
el: ".swiper-pagination",
//點(diǎn)擊分頁器的指示點(diǎn)分頁器會(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',
}
},
};
},
三商蕴、Echarts使用
1、安裝
npm install echarts --save
2悲敷、導(dǎo)入
import * as echarts from 'echarts';
關(guān)閉eslint語法檢查
"eslintConfig": {
"rules": {
"no-unused-vars": "off"
}
}
3究恤、準(zhǔn)備容器
<div class="charts">
<h3>使用ECharts</h3>
<div id="main"></div>
</div>
4、選擇示例圖
官方文檔：https://echarts.apache.org/examples/zh/index.html
選擇合適的圖標(biāo)下載
image.png
5后德、引入Echarts
于準(zhǔn)備好的dom部宿，初始化echarts實(shí)例，繪制圖表。因?yàn)樵擁?xiàng)目是基于vue理张，所以需要在mounted生命周期中進(jìn)行這一步（獲取dom赫蛇，需要在頁面掛載完成后進(jìn)行）。
（1）折線圖示例
import * as echarts from "echarts";
export default {
name: "List",
mounted() {
// 基于準(zhǔn)備好的dom雾叭，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById("container"));
myChart.setOption({
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
],
});
},
}
image.png
（2）柱狀圖示例
通過axios獲取后臺(tái)數(shù)據(jù)悟耘。（注意：axios需要先安裝，再導(dǎo)入）
// 導(dǎo)入axios
import axios from "axios";
export default {
name: "Test",
data() {
return {
// 定義一份數(shù)據(jù)
list: [],
};
},
methods: {
// 加載數(shù)據(jù)的方法
async getList() {
// 向后臺(tái)發(fā)送請(qǐng)求织狐，獲取一份數(shù)據(jù)
let {data} = await axios.get("data/data2.json");
this.list = data
this.showdata()
},
// 渲染數(shù)據(jù)的方法
showdata() {
// 基于準(zhǔn)備好的dom暂幼，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById("main"));
// 繪制圖表
myChart.setOption({
title: {
text: "產(chǎn)品銷售信息",
// 副標(biāo)題
subtext: "2021-12-08",
},
// 圖例組件
legend: {},
tooltip: {},
// X軸信息
xAxis: {
// 產(chǎn)品名稱數(shù)據(jù)作為X軸信息展示
data: this.list.map((r) => r.title),
},
// Y軸信息
yAxis: {},
// 系列
series: [
{
name: "銷量",
type: "bar",
data: this.list.map((r) => r.xl),
},
{
name: "庫存",
type: "bar",
data: this.list.map((r) => r.kc),
},
],
});
},
},
// 頁面掛載完成
mounted() {
this.getList();
},
};
[
{
"title": "襯衫",
"xl": 5,
"kc": 9
},
{
"title": "羊毛衫",
"xl": 20,
"kc": 19
},
{
"title": "雪紡衫",
"xl": 36,
"kc": 55
},
{
"title": "褲子",
"xl": 10,
"kc": 2
},
{
"title": "高跟鞋",
"xl": 10,
"kc": 5
},
{
"title": "襪子",
"xl": 20,
"kc": 35
}
]
image.png
