Vue3全家桶 - VueRouter - 【1】快速使用（创建路由模块 + 规定路由模式 + 使用路由规则 + RouterView-RouterLink）

VueRouter

Vue-Router官网；
vue-router 是 vue.js 官方给出的路由解决方案，能够轻松的管理 SPA 项目中组件的切换；
安装：yarn add vue-router@4；

快速使用

1.1 创建路由模块

在项目中的 src 文件夹中创建一个 router 文件夹，在其中创建 index.js 模块；
采用 createRouter() 创建路由，并暴露出去；
在 main.js 文件中初始化路由模块 app.use(router)

示例代码：

router/index.js：

js 复制代码

import { createRouter } from 'vue-router'

// TODO 创建路由
const router = createRouter({
    // 相关配置
})

export default router

main.js：

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由模块
let app = createApp(App)

app.use(router) // 初始化路由插件

app.mount('#app')

1.2 规定路由模式

hsitory路由模式可采用：
createWebHashHistory()：hash模式：
- 它在内部传递的实际URL之前使用了一个哈希字符#；
- 由于这部分URL从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理；
createWebHistory()： history模式，推荐使用；
- 当使用这种历史模式时，URL会看起来很正常（URL中不带#号）；
- 由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问URL，就会得到一个404错误，要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由，如果URL不匹配任何静态资源，它应提供与你的应用程序中的index.html相同的页面；

示例代码：

history路由模式：

js 复制代码

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// TODO 创建路由
const router = createRouter({
  // TODO 规定路由模式
  history: createWebHistory(),
})

export default router

hash路由模式：

js 复制代码

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// TODO 创建路由
const router = createRouter({
  // TODO 规定路由模式
  history: createWebHashHistory(),
})

export default router

1.3 使用路由规则

routes配置路由规则：
- path：路由匹配的URL；
- name：当路由指向此页面时显示的名字；
- component：路由调用这个页面时加载的组件；

路由模块用到的组件：

HomeVue.vue：

html 复制代码

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

onMounted(() => {});
</script>

<template>
  <div class="home">
    网站首页界面
  </div>
</template>

<style scoped>
.home {
  color: #fff;
  font-size: 24px;
  background-color: #ff0040;
}
</style>

BlogHomeVue.vue：

html 复制代码

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

onMounted(() => {});
</script>

<template>
  <div class="blog-home">
    博客首页界面
  </div>
</template>

<style scoped>
.blog-home {
  color: #fff;
  font-size: 24px;
  background-color: chartreuse;
}
</style>

创建路由规则数组并使用：

js 复制代码

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// TODO 创建路由规则数组
const routes = [
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/HomeVue.vue')
  },
  {
    path: '/blog',
    name: 'blog',
    component: () => import('@/views/BlogHomeVue.vue')
  }
]

// TODO 创建路由
const router = createRouter({
  // TODO 规定路由模式
  history: createWebHistory(),
  routes
})

export default router

1.4 声明路由链接(RouterLink) 和路由出口(RouterView)

在组件模块中声明路由链接和占位符：
- <router-link></router-link>：路由链接，to 属性则为点击此元素，需要切换的路由地址；
  - 🔺 注意：
    - 如果需要配合激活类名使用，需要使用 active-class 进行指定；
    html 复制代码
```
<router-link to="路径" active-class="类名" > xxx </router-link>
```
- <router-view />：路由占位符（Vue2中的路由出口），路由切换的视图展示的位置；

示例代码：

App.vue：（此处有可能URL地址中仍然带有#号，需要重启项目）

html 复制代码

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

onMounted(() => {});
</script>

<template>
<!-- 路由链接，点击是路由地址会切换到属性 to 的地方 -->
  <router-link to="/home">首页</router-link> | 
  <router-link to="/blog">博客</router-link>

  <hr>

  <!-- 路由试图，路由切换组件展示的地方，路由出口 -->
  <router-view />
</template>

最终运行展示：

Vue3全家桶 - VueRouter - 【1】快速使用（创建路由模块 + 规定路由模式 + 使用路由规则 + RouterView-RouterLink）

VueRouter

快速使用

1.1 创建路由模块

1.2 规定路由模式

1.3 使用路由规则

1.4 声明路由链接(RouterLink) 和 路由出口(RouterView)

1.4 声明路由链接(RouterLink) 和路由出口(RouterView)