Vue-Router路由详解------路由的使用和模式

1. vue-router的理解：

vue的一个插件，专门用来实现SPA应用。（单页面应用程序，点击页面中的导航链接不会刷新页面，只会做页面的局部更新）

什么是路由？
一个路由就是一组映射关系(key-value),key为路径，value可能是function或component

路由分类（重点理解前端路由就好）

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

2. 路由的基本使用

2.1 html中的使用

1. 引入路由

<!-- 引入路由 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js" integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2. 配置路由

// 1.配置路由对象数组
		// 定义组件
		let aticle={
   
			template:`
				<div>文章页面</div>
			`
		};
		let column={
   
			template:`
				<div>栏目页面</div>
			`
		};

3. 创建路由对象

// 1.配置路由对象数组
		let routes=[
			{
   
				path:'/article',
				component:aticle
			},
			{
   
				path:'/column',
				component:column
			}
		];

4. 将路由器对象注入vue实例中

new Vue({
   
	router,
	el:"#app",
})

5. 页面中使用路由和配置路由出口：router-link标签加to属性、router-view标签</