安装vue-router

yarn add vue-router

或

npm i vue-router

创建组件

• 在src/views文件夹中创建两个组件

创建文件

• 在src/router文件夹中创建index.js文件

//导入路由
import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";

// 创建路由实例
const router = createRouter({
    // 路由模式
    history: createWebHistory(), //history模式

    // history:createWebHashHistory()   //hash模式
    // 路由规则
    routes: [{
            path: '/index',
            name: 'index',
            component: () =>
                import ('../views/Home.vue')
        },
        {
            path: '/login',
            name: 'login',
            component: () =>
                import ('../views/Login.vue')
        }
    ]
})

// 导出路由实例
export default router

挂载

• 在main.js文件中挂载路由

import { createApp } from 'vue'
import App from './App.vue'
//引入路由文件
import router from './router'


const app = createApp(App)
    // 挂载路由
app.use(router)
app.mount('#app')

使用

<script setup >

</script>

<template>
  <h1>Hello vue3</h1>
  <div>
    <router-link to="/index">首页</router-link>
  </div>
  <div>
    <router-link to="/index?id=25">首页</router-link>
  </div>
  <div>
    <router-link to="/login">登录</router-link>
  </div>
  <router-view ></router-view>
</template>

<style scoped>

</style>