好看的网页千篇一律，有趣的代码万里挑一。
今天分享一些关于路由的知识点，也是十分有趣的。
**关键字：路由、swiper插件、编程式路由跳转、轮播图、query参数、router **
南京双子塔
南京青奥双子塔，位于南京市建邺区的南京国际青年文化中心，它是由誉为建筑界“解构主义大师”的扎哈·哈迪德设计。南京青奥中心由会议中心与两座塔楼三大部分构成。双塔高度分别为314.5米和249.5米，为南京滨江风光带上重要的标志性建筑。
双子塔夜景
你会说，这和路由有什么关系？
你看看它的造型，像不像一个路由器？
当初设计师的创作灵感就是路由器。😄
万物互联，在Vue中就是用到路由，实现互联的。
代码和建筑很相似，需要设计、筑基、搭建、周期、测试、亮相。
所以代码永远敲不完，要有一定的耐心、热情和坚持。
接下来，上代码：
初始路由
1. 安装
npm install vue-router
2. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3. 创建路由器
// 导入页面组件
import Index from '../pages/Index.vue'
// 创建一个路由器对象
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. 使用路由
5.1. 路由组件跳转
<!-- 路由链接，用于跳转路由，to属性设置路由路径 -->
<router-link to="/">首页</router-link>
<!-- 路由视图，用于显示路由组件，当浏览器的地址栏中切换到指定的路由路径时，
就会在router-view中显示对应的路由组件。-->
<router-view></router-view>
5.2. 编程式路由跳转
// $router就是当前项目中的路由器对象，它的push方法，用于跳转路由
// replace方法，也是用于跳转路由。
// push方法是在浏览器的历史记录中，添加一个路由信息
// replace方法是在浏览器的历史记录中，替换前一条路由信息
this.$router.push('/order')
6. swiper插件(低版本)
6.1. 安装
npm install swiper@5 vue-awesome-swiper@4
6.2. 导入
全局导入
// 导入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',
}
},
};
},
路由传参
1. params 参数
路由配置
{
path:'/index',
// 重定向到指定的路由
redirect:'/'
},
{
// 注意：这里的路由需要传一个参数，路由可以传多个参数
path:'/city/:id',
// 设置该选项为true，组件可以通过props选项接收路由参数
props:true,
component:City
},
// *号，表示匹配不上的所有路由
{
path:'*',
component:Error404
}
页面
<li @click="$router.push(`/city/${item.id}`)" v-for="(item,index) in citys" :key="index">{{item.name}}</li>
// 使用props选项接收路由参数
props:["id"],
created() {
// $route返回的是当前路由信息，它身上有一个params属性，该属性里面保存的是当前路由信息的参数。
// console.log(this.$route);
// console.log(this.$route.params.id);
// 从路由参数中获取城市编号
// let cityId = this.$route.params.id
// 再根据城市编号，获取对应的城市信息
// this.city = this.citys.find(c=>c.id==cityId)
this.city = this.citys.find(c=>c.id==this.id)
},
v-html指令
<!-- 所有由ref修饰的组件或标签，都会保存到$refs中 -->
<!-- <div ref="content"></div> -->
<!-- v-html指令，用于渲染html内容 -->
<div v-html="city.content"></div>
<!-- v-text指令，用于渲染文本内容 -->
<!-- <div v-text="city.content"></div> -->
mounted() {
this.$refs.content.innerHTML = this.city.content
},
2. query参数
<!-- 路由地址，采用query传参方式：?参数1=XXX&参数2=XXX... -->
<li @click="$router.push(`/type?id=${item.id}`)"
v-for="(item,index) in types" :key="index">{{item.name}}</li>
created() {
// 通过$route.query获取路由地址?后面的参数
// console.log(this.$route.query);
this.type = this.types.find(t=>t.id==this.$route.query.id)
}
3. router和route
// $router返回的是当前项目中的路由器对象
// $route返回的是当前路由信息
// 判断当前路由信息，不是/news，添加到/news
if(this.$route.path != '/news'){
this.$router.push('/news')
}
4. vue.config.js
// 引入nodejs内置模块path
let path = require('path')
// 注意：该配置文件中，只能使用commonjs模块化语法
module.exports = {
// 关闭 eslint-loader 语法检查
lintOnSave:false,
// 配置devServer开发服务器
devServer:{
// 端口号
port: 5566,
// 自动打开
open:true,
// 静态资源路径
// 注意：__dirname是nodejs的内置变量，返回的是的当前项目的绝对路径
contentBase: path.join(__dirname, "static")
},
// 用于配置原生的Webpack配置
configureWebpack:{
// 解析
resolve:{
// 定义路径别名
alias:{
"@c":path.resolve(__dirname,'src/components'),
"@p":path.resolve(__dirname,'src/pages'),
"@a":path.resolve(__dirname,'src/apis'),
"@u":path.resolve(__dirname,'src/utils'),
}
}
}
}
路由进阶
路由模式
// 1.路由模式
// 有两种模式：hash模式（默认） 和 history模式
// hash模式，使用的是锚链接的原理实现路由的跳转，这种方式兼容性非常好；缺点是路径带有#号，不够美观。
// history模式，使用的是浏览器中内置的history对象实现路由的跳转，这种方式不兼容老版本的浏览器，刷新后会丢失路由信息。
mode:'hash'
2. 路由元信息
{
path:'/',
name:'home',
// meta选项，用于配置路由的元信息，里面的内容是自定义的，用于配置路由的数据
meta:{
title:'首页'
},
// 路由组件懒加载
component:()=>import('../pages/Home.vue'),
}
3. nprogress加载进度条
安装
npm install nprogress
导入
// 导入nprogress
import NProgress from "nprogress";
// 导入nprogress的样式
import "nprogress/nprogress.css";
在导航守卫中使用
// 导航守卫
// 1.路由前置守卫--路由跳转之前
router.beforeEach((to, from, next) => {
// to 返回去哪里的路由信息
// from 返回从哪来的路由信息
// next方法，用于跳转
// 开启loading
NProgress.start();
// 通常：在这里会做一些权限验证操作
next();
});
// 2.路由后置守卫--路由跳转完成
router.afterEach((to, from) => {
// 通常：在这里会做一些页面的修改操作
document.title = to.meta.title;
// 结束loading
NProgress.done();
});
二级路由
//配置子路由信息
children:[
//手机订单路由
{
path:'phoneOrder',
name:'phoneOrder',
meta:{
title:'手机订单'
},
component:()=>import(/* webpackChunkName: "b" */'../pages/Order/PhoneOrder.vue')
}
]
路由懒加载
// 路由组件懒加载
component:()=>import('../pages/Home.vue')
scoped
scoped属性，用于设置局部样式，当前组件中的样式只对当前组件生效
<style scoped>
....
</style>
糖糖出题：
使用Vue-router实现页面跳转，第一个页面介绍陆游和《示儿》，第二个页面介绍唐琬，试试吧！
陆游
陆游 （南宋爱国诗人）
示儿⑴
死去元知万事空⑵，但悲不见九州同⑶。
王师北定中原日⑷，家祭无忘告乃翁⑸。 [1]
唐琬
唐琬
