在网页中，经常需要发生页面更新或者跳转。这时候我们就可以使用Vue-Router来帮我们实现。Vue-Router是用来做路由的，也就是定义url规则与具体的View映射的关系。可以在一个单页面中实现数据的更新。

一、安装：

通过命令：npm install [email protected] --save ，或者在创建项目的时候，选择添加Vue-Router的支持。

二、基本使用：

1. 创建路由代码：Single Page Application：SPA

在src/router/index.js中，填入以下代码：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

以上代码解释如下：

1. 使用createRouter 创建路由对象。

2. 路由工作模式，有两种工作模式：

   • history模式：路由中不包含#，更加美观，但是在后期部署后，如果前端项目代码和后端项目代码部署在同一个域名下，则容易产生路由混淆（前端路由和后端路由混淆在一起了）。以上代码用的是history模式，代码为：

     const router = createRouter({
     	history:createWebHistory(), //history模式
     })
     

   • hash模式：路由中包含#，不太美观，对SEO优化不够友好。好处是兼容性更好，即使前端代码和后端代码部署在同一个域名下，也不会产生路由混淆。使用hash模式的代码为：

     const router = createRouter({
     	history:createWebHashHistory(), //hash模式
     })
     

3. routes是一个数组，里面是对象数据，每个对象中的属性作用分别如下：

   • path：该路由对应的path。
   • component：组件对象，既可以先导入，也可以指定组件的时候使用import语句来导入。
   • name：路由名称，后期在做路由反转的时候可以使用。

2. 使用路由

然后在main.js文件中对router进行使用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

以上相关代码解释如下：

1. 从src/router/index.js中导入router对象。
2. 执行app.use(router)代码，即可使用此路由了。

3. 展示路由：

在App.vue中的代码如下：

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>