🎍什么是路由

今天给大家分享一个好像很熟悉又好像很不收悉的东西——路由（路由为了实现SPA应用），听到这个词语的第一个反应联想到的是路由器，路由和路由器很明显不是同一个东西？

路由器

（route）路由：其实是一组key-value的映射关系，前端路由：key是路径，value是组件；后端路由：value是function，用于处理客户提出的请求。

（router）路由器：多个路由需要路由器进行管理。

🎍路由的基本使用

想要使用vue路由首先我们需要安装一个插件vue-router，vue-router是vue的一个插件库，专门用来实现SPA应用。

SPA应用

单页Web应用（single page web application,SPA）
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过Ajax请求获取

单页Web应用效果，注意左上角的刷新图标不会刷新

基本使用步骤

安装vue-router，命令：npm i vue-router
应用插件：Vue.use(VueRouter)
编写router配置项
实现切换，不直接使用<a></a>标签，通过<router-link></router-link>标签去转成a标签，active-class可配置高亮样式，例如：<router-link active-class=”active” to=”/about”>About</router-link>
指定展示位置：<router-view></router-view>

当引入插件后，会多了一个router配置项，配置项的值不能随意的给，必须是一个路由器。

在开发中，当安装vue-router插件之后，会在src中新建一个router文件夹，里面新建一个index.js文件，该文件专门用于创建整个应用的路由器。

配置路由器代码：

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

🎍几个注意点

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

🎍命名路由

作用：可以简化路由的跳转。

如何使用：

（1）给路由命名

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

（2）简化跳转

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6231.html