前端基础之《Vue（17）—路由集成》
一、页面应用程序分类
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）在合适的位置放置一个视图容器