Vue2进阶——路由/组件库

一、vue-router

1、概念

• 理解：vue的一个插件库，专门用来实现SPA应用
• SPA：单页面web应用（single page web application）
  整个应用只有一个完整的页面(index.html)
• 点击页面中的导航链不会刷新页面，只会做页面的局部刷新。
• 一个路由就是一组映射关系(key-value)，key为路径，value可能是function或component

2、分类

• 前端路由
  value是component，用于展示页面内容，当浏览器的路径改变时，对应的组件就会显示。
• 后端路由
  value是function，用于处理客户提交的请求，服务器收到一个请求时，根据请求路径找到匹配的函数处理请求，返回响应数据。

3、核心部分

新建router文件夹，里面新建index.js，在其中：

//该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'
//以About组件举例，引入组件
import About from '../component/About'
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
	]
})

4、安装与使用

• 安装

npm i vue-router

• 引入路由器

import router from './router'

• 应用插件

Vue.use(VueRouter)
new Vue({
	router
})

• 使用

1.点击发生路由激活
//active-class是路由被激活时的样式
<router-link to="/about" active-class="xxx"></router-link>
2.路由呈现
指定组件的呈现位置
<router-view></router-view>

5、几个注意点

• 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
• 通过切换，隐藏了路由组件，默认是被销毁的，需要的时候再去挂载。
• 每个组件都有自己的$route属性，里面存储着自己的路由信息。
• 整个应用只有一个$router（每个路由组件里都有这个属性），可以通过组件的$router属性去获取到

二、嵌套（多级）路由

路由内部继续嵌套路由

export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
			children:[
				{
					path:'news',    //不需要加/，children后面解析会自动补全
					component:News
				}
			]
		},
	]
})
//后续跳转需要写全路径
<router-link to="/about/news" active-class="xxx"></router-link>

三、路由传参

1、query参数

export default new VueRouter({
	routes:[
		{
			name:'Home',
			path:'/about',
			component:About
			children:[
				{
					name:'NEW'
					path:'news',    //不需要加/，children后面解析会自动补全
					component:News,
					
				}
			]
		},
	]
})
//类似于url地址传参
//跳转路由并携带query参数（参数存储在$route.query中），to的字符串写法
//利用模板字符串引入js变量 `${}`
<router-link to="`/about/news?id=${id}&title=${title}`" active-class="xxx"></router-link >
//跳转路由并携带query参数，to的对象写法。
//写了name后，后续可以不写path，写name也能跳转
<router-link :to="{
		path:'/about/news',（name:'NEW'）
		query:{
			id:id,
			title:title
		}
	}"
></router-link >
export default{
	data(){
		return(){
			id:666,
			title:"oo"
		}
	}
}
//接收参数
this.$route.query.xx

2、params参数

export default new VueRouter({
	routes:[
		{
			name:'Home',
			path:'/about',
			component:About
			children:[
				{
					name:'NEW'
					path:'news/:id/:title',  //利用占位符传参，参数存储在params   
					component:News,
					
				}
			]
		},
	]
})
//类似于url地址传参
//跳转路由并携带params参数（参数存储在$route.params中），to的字符串写法
<router-link to="`/about/news/${id}/{title}`" active-class="xxx"></router-link >
//跳转路由并携带query参数，to的对象写法。
//写了name后，后续可以不写path，写name也能跳转
<router-link :to="{
		name:'NEW',  //不允许写path:'/about/news'
		params:{
			id:id,
			title:title
		}
	}"
></router-link >
export default{
	data(){
		return(){
			id:666,
			title:"oo"
		}
	}
}
//接收参数
this.$route.params.xx

3、props参数

让路由组件更方便的接收参数。

export default new VueRouter({
	routes:[
		{
			name:'Home',
			path:'/about',
			component:About
			children:[
				{
					name:'NEW'
					path:'news/:id/:title',  //利用占位符传参，参数存储在params   
					component:News,
					//props的第一种写法。不常用，因为数据是固定死的
					//值为对象，该对象中的所有key-value都会以props的形式传给News组件
					props:{id:1,title:'hello'}
					
					//props的第二种写法，值为布尔值
					//若布尔值为真，则该路由组件就会将收到的所有params参数以props形式传给News组件
					props:true
					
					//props的第三种写法，值为函数
					props($route){
						return {id:$route.query.id,title:$route.query.title}
					}
				}
			]
		},
	]
})
//News组件中接收
export default{
	data(){
		return(){
		}
	}
	props:['id','title']
}

四、其他

1、<router-link>中replace

• 作用：控制路由跳转时操作浏览器历史记录的模式
• 浏览器的历史记录有两种写入方式，分别为push和replace，push是追加历史记录（类似于栈结构），replace是替换当前记录。路由跳转时候默认为push。
• 开启replace

<router-link replace ......>News</router-link>

2、缓存路由组件

• 按照默认规则，通过切换，隐藏了路由组件，默认是被销毁的，需要的时候再去挂-载。
• 缓存路由让不展示的路由保持挂载，不被销毁。
• 组件放哪里，在哪里使用。

1、全部缓存
<keep-alive>   //不指定缓存路由是什么，默认缓存所有路由
	<router-view></router-view>
</keep-alive>
2、缓存一个
<keep-alive include="NEW">  //指定缓存路由是什么，要写组件名 
	<router-view></router-view>
</keep-alive>
3、缓存多个
<keep-alive :include="["one","two","three"]">  //指定缓存路由是什么，要写组件名 
	<router-view></router-view>
</keep-alive>

3、两个新的声明周期钩子

路由组件独有的两个钩子，用于捕获由路由组件的激活状态。当被切走后，如果路由缓存了，则不会被销毁，但是会被销活，因此触发deactivated。切回来就会触发activated。

activated(){
}
deactivated(){
}

五、编程式路由导航

• 不使用<router-link>进行跳转，利用函数调用进行，使其更加灵活。
• 调用不同函数实现不同的跳转。

 1. push/replace
 export default{
	methods:{
		function(){
			//同理还有this.$router.replace
			this.$router.push({
					name:'NEW',  //不允许写path:'/about/news'
					params:{
						id:id,
						title:title
					}
			})
		}
	}
}
2.back/forward/go
利用this.$router.back()/this.$router.forward()实现回退和前进
利用this.$router.go(n)往前走n步，若n为负数则往后走

六、路由守卫

• 作用：对路由进行权限控制
• 分类：全局守卫，独享守卫，组件内守卫

1、全局前置守卫

初始化时执行，每次路由切换前执行

const router = new VueRouter({
	//里面写路由的具体规则
	routes:[
		name:'Home',
		path:'/about',
		component:About,
		meta:{isAuth:false}
	]
})
router.beforeEach((to,from,next)=>{
	//利用meta存储信息或者进行权限限制，对需要进行权限控制的路由进行标记
	if(to.meta.isAuth){      //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'BUAA'){    //权限控制的基本规则
			next();  //放行
		}else{
			alert("无权限查看")
		}
	}else{
		next()  //放行
	}
})

2、全局后置守卫

初始化时执行，每次切换路由后执行

router.beforeEach((to,from)=>{
	if(to.meta.title){      
		document.title = to.meta.title  //修改网页title
	}else{
		document.title = 'BUAA'
	}
})

3、独享路由守卫

• 对特定路由写特定的路由守卫。
• 独享路由守卫只有前置没有后置。

const router = new VueRouter({
	//里面写路由的具体规则
	routes:[
		name:'Home',
		path:'/about',
		component:About,
		meta:{isAuth:false},
		beforeEnter(to,from,next)=>{
			//...
		}
	]
})

4、组件内路由守卫

在组件内写路由守卫

export default{
	data(){
		return(){
			
		}
	},
	//通过路由规则(在路由中有定义)，进入该组件时被调用
	beforeRouteEnter(to,from,next){
		next()
	},
	//通过路由规则，离开该组件时被调用
	beforeRouteLeave(to,from,next){
		next()
	}
}

七、两种工作模式

• 对于一个url来说，#及其后面的内容就是hash值。
• hash值不会包含在http请求中，即：hash值不会带给服务器。

1、hash模式

• 地址永远带着#号，不美观。
• 若以后将地址通过第三方手机aoo分享，若app校验严格，则地址会被标记为不合法。
• 兼容性较好。

2、history模式

• 地址干净，美观。
• 兼容性和hash模式相比略差。
• 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

3、更改模式

系统默认是hash工作模式，通过以下方式更改

export default new VueRouter({
	mode:'history'
})

八、UI组件库

按照官网步骤上手即可。

1、移动常用组件库

Vant
Cube UI
Mint UI

2、PC端常用组件库

Element UI
IView UI