一、页面应用程序分类
1、单页面应用程序（SPA）
通过路由系统把组件串联起来的并且只有一个根index.html页面的程序，叫做单页面应用程序。
2、多页面应用程序（MPA）
整个应用程序中，有多个.html页面。每次用户请求新页面时，浏览器都会向服务器请求一个新的html页面，服务器端处理逻辑并返回完整的html代码。
二、如何在脚手架环境中集成Vue路由系统
1、版本意识
Vue2 + vue-router3
2、安装指定版本
yarn add vue-router@3.6.5
3、调用插件后
可以获得全局组件：
<router-link>：制作菜单，点击跳转url。
<router-view>：视图容器，用于显示url配对成功的页面组件。
在vue原型链上，加了重要api：
$route
$router
4、router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // 调用插件上的install方法
import HomePage from './pages/home/HomePage.vue'
import UserPage from './pages/user/UserPage.vue'
// 创建路由系统（定义一个变量）
const router = new VueRouter({
// 选项
mode: 'hash', // 路由模式
routes: [
{ path: '/home', component: HomePage},
{ path: '/user', component: UserPage}
] // 路由规则（数组，访问指定url，加载对应的组件）
})
// 导出
export default router5、router.js和main.js怎么产生关系
直接产生关系：在main.js中直接import了App.vue。
间接产生关系：App.vue中有个HelloW组件，它和main.js没有直接关系，但是有间接关系。
src中的所有代码，无论是样式模块、js模块、组件模块、任何模块，都必须直接或间接和main.js产生关系，否则你文件丢进去是毫无意义的。
6、main.js导入并关联
// 从node_modules中导入vue模块
import Vue from 'vue'
// 导入App组件（.vue单文件组织）
import App from './App.vue'
// 关闭生产环境的vue提示
Vue.config.productionTip = false
// 导入路由实例
import router from './router'
// 创建vue响应式系统
const app = new Vue({
// 用于把App组件渲染到#app挂载节点中去（在index.html中）
render: h => h(App),
router: router
})
// 挂载
app.$mount('#app')
7、需求
访问/home，加载Home组件；访问/usr，加载User组件
8、路由模式
hash：url中有#号
history：url中没有#号
9、home和user组件的页面在哪里显示
app是最外层的组件，在App.vue中使用<router-view></router-view>
<template>
<div id="main">
<h1 v-text="msg"></h1>
<HelloW msg="helloWorld"></HelloW>
<HelloW msg="hello 202505"></HelloW>
<router-view></router-view>
<router-link to='/home'>首页</router-link>
<router-link to='/user'>我的</router-link>
</div>
</template>
<script>
import HelloW from './components/HelloW.vue'
// 选项
export default {
name: 'App',
data() {
return {
msg: '202505'
}
},
components: {
HelloW
}
}
</script>
<style>
#main {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
10、简单描述下步骤
（1）安装路由v3版本，注册路由
（2）新建src/router.js文件，注册路由Vue.use(VueRouter)
（3）创建路由实例，定义路由规则，并在main.js挂载路由系统
（4）在合适的位置放置一个视图容器
