【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用

单页面应用 与 多页面应用

单页面应用（Single-Page Application，SPA）和多页面应用（Multi-Page Application，MPA）是 Web 应用程序的两种不同架构方式。它们在页面加载和交互方式上有所区别。

单页面应用（SPA）：指的是整个应用只有一个 HTML 页面，页面的内容和交互都通过 JavaScript 动态加载和更新。在 SPA 中，页面的切换和内容的变化通过前端路由来实现，通常使用框架（如 Vue、React、Angular）来构建。SPA 的优点是用户体验好，无需刷新整个页面即可根据用户交互动态地更新内容，提供流畅的用户界面。但对于首次加载较大的应用，会消耗较多的初始加载时间。

多页面应用（MPA）：指的是应用由多个独立的 HTML 页面组成，每个页面对应一个独立的功能或视图。在 MPA 中，每个页面都是独立的，它们通过链接或表单提交等方式进行页面跳转。在每个页面中，服务器会返回一个新的 HTML 页面，包含所需的样式和脚本。MPA 的优点是每个页面都有独立的 URL，有利于 SEO（搜索引擎优化），也更适合传统的 Web 开发方式。但页面之间的切换会导致整个页面的刷新，用户体验稍差一些。

选择SPA还是MPA主要取决于应用的需求和目标。SPA适合构建交互复杂、用户体验要求高的应用，如社交媒体应用、在线编辑器等；而MPA适合构建内容丰富、独立页面较多的应用，如电子商务网站、新闻门户等。

常见的网站比如网易云音乐就是单页面应用，而京东，淘宝就是一个多页面应用。

VueRouter路由

像vue开发的就是一个典型的单页面程序。
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。

如何配置VueRouter

1. 下载vue-router因为它是一个单独的模块所以需要下载。
   vue2对应的vue-router版本是 vue-router3.x
   vue3对应的vue-router版本是 vue-router4.x
   使用npm下载：npm install vue-router@3.6.5 --save
   使用yarn下载：yarn add vue-router@3.6.5

2. 在main.js中引入。

import VueRouter from 'vue-router'

3. 安装注册。

Vue.use(VueRouter)

4. 创建路由对象。

const router = new VueRouter();

5. 将路由对象注入到Vue实列中，建立关联,键值对形式，键与值同名可简写。

new Vue({
   
  render: h => h(App),
  router
}).$mount('#app')

main.js完整代码：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.config.productionTip = false
Vue.use(VueRouter)

const router = new VueRouter();

new Vue({
   
  render: h => h(App),
  router
}).$mount('#app')

配置成功启动项目浏览器顶部地址栏会出现#号

如何使用VueRouter

首先肯定是要配置路由规则。
首先准备了三个简单的页面组件。
引入页面组件，然后将他添加到router的routes属性中，path是访问路径，component是对应的组件页面{path:"/fine",component:MyFine},页面组件的名称最好超过两个单词，否则会报错，因为是vue规定的，为了有更强大的语义性。name

import Vue from 'vue'
import App from './App.vue'
import MyFine from './views/MyFine.vue'
import MyFriend from './views/MyFriend.vue'
import MyIndex from './views/MyIndex.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({