前端基础之《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 router

5、router.js和main.js怎么产生关系
项目文件怎么和main.js产生关系？
直接产生关系：在main.js中直接import了App.vue。
间接产生关系：App.vue中有个HelloW组件，它和main.js没有直接关系，但是有间接关系。

src中的所有代码，无论是样式模块、js模块、组件模块、任何模块，都必须直接或间接和main.js产生关系，否则你文件丢进去是毫无意义的。

6、main.js导入并关联router

// 从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 // key和value相同，可以简写成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）在合适的位置放置一个视图容器