【博学谷学习记录】超强总结,用心分享丨前端开发:Vue路由的基本配置

单页应用程序与路由

一、SPA - 单页应用程序

SPA： Single Page Application 单页面应用程序
具体使用示例: 网易云音乐 https://music.163.com/
单页面应用(SPA): 所有功能在一个html页面上实现
MPA : Multiple Page Application多页面应用程序
优势
传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面
单页面应用程序只有第一次会加载完整的页面
以后每次请求仅仅获取必要的数据，减少了请求体积，加快页面响应速度，降低了对服务器的压力
SPA更好的用户体验，运行更加流畅
缺点
开发成本高 (需要学习路由) vue-router react-router
不利于 SEO 搜索引擎优化 谷歌浏览器在解决这个问题 ssr:服务端渲染 server side rendering

二、路由介绍

路由 : 是浏览器 URL 中的哈希值( # hash) 与 展示视图内容(组件) 之间的对应规则
简单来说,路由就是一套映射规则(一对一的对应规则), 由开发人员制定规则.-
当 URL 中的哈希值( # hash) 发生改变后,路由会根据制定好的规则, 展示对应的视图内容(组件)
渐进式 =>vue => vuer-router (管理组件之间的跳转)
在 web App 中, 经常会出现通过一个页面来展示和管理整个应用的功能.
SPA 往往是功能复杂的应用,为了有效管理所有视图内容,前端路由 应运而生.
vue 中的路由:是 hash 和 component 的对应关系, 一个哈希值对应一个组件

三、vue-router的介绍

vue-router： vue-router本质是 vue 官方的一个路由插件，是一个第三方包
vue-router集成了 路径 和 组件的切换匹配处理，我们只需要配置规则即可。

四、组件的分类说明

组件分类： .vue文件分2类, 一个是页面组件, 一个是复用组件
页面组件 - 页面展示 - 配合路由用
复用组件 - 展示数据/常用于复用
总结: views下的页面组件, 配合路由切换, components下的一般引入到views下的vue中复用展示数据

五、vue-router的基本使用(5 + 2)

1. 5个基础步骤

1.下载vue-router模块到当前工程
安装

yarn add vue-router@3.5.3

2.在main.js中引入VueRouter函数

import VueRouter from 'vue-router'

3.添加到Vue.use()身上 – 帮你注册全局RouterLink和RouterView组件

Vue.use(VueRouter)

4.创建路由对象

const router = new VueRouter({})

5.将路由对象注入到new Vue实例中

new Vue({ router })

2. 2个核心步骤

1.配置路由规则

// 创建一个路由对象
const router = new VueRouter({
	// 路由的规则
	// route: 一条路由规则
	routes:[
	{
	// 路径 锚点
	// 组件
	path: '/find',
	component: Find,
	},
	{
	path:'/my',
	component: My,
	},
	{
	path:'/friend',
	component: Friend,
	}
	]
})

2.指定路由出口 router-view