vue3中的router的基本使用

vue3使用路由和vue2使用路由的版本不同，vue3使用的是vue-router 4.x版本，vue2使用的是vue-router 3.x的版本。

在vue3中配置路由

1、创建 router.js 配置文件（文件的目录最好是在相对应的组件目录之下）

2、配置router.js 文件

// 按需导入需要的模块
import {createRouter,createWebHashHistory} from 'vue-router'

// 导入需要进行路由的组件
import xxx from '对应的路径'

// 创建路由对象
const router = createRouter({
  // 指定路由的工作模式
  history: createWebHashHistory(),
  // 声明路由的匹配规则
  router: []
})

// 导出路由对象
export default router

3、在 main.js配置文件下进行以下的文件配置

import { createApp } from 'vue'

// 导入路由模块
import router from '上面router.js对应路径地址'

const app = createApp(App)

// 挂载路由模块
app.use(router)

app.mount('#app')

4、在App.vue根组件中使用路由

        

<template>
  <div>
    <h1>vue-router 的使用</h1>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link>
    <hr />

    <!-- 路由的占位符 -->
    <router-view></router-view>
  </div>
</template>