安装

npm install vue-router@4

tip：在vue3项目中安装vue-router的时候，记得指定vue-router为4以上的版本。

在vue实例上注册vue-router

1. 在src目录下创建router文件夹，在此文件夹下创建index.ts：

   

2. 在src/router/index.ts中引入并实例化路由对象：

   import { createRouter, createWebHistory } from 'vue-router'
   
   /** 创建vue-router实例对象 */
   const router = createRouter({
     history: createWebHistory(), // 历史模式
     routes: [], // 路由列表
   })
   
   export default router
   

3. 在main.ts中引入路由实例对象并在vue实例上注册：

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router/index'
   
   /** 创建vue实例对象 */
   const app = createApp(App)
   
   /** 在vue实例对象上注册vue-router实例对象 */
   app.use(router)
   
   /** vue组件的内容全部都放在#app元素内 */
   app.mount('#app')
   

示例

login页面和register页面两者之间通过路由来回跳转

1. 创建路由组件：

   在src目录下创建views文件夹，专门用来存放路由组件。

   

   login.vue：

   <template>
     <div>login</div>
   </template>
   
   <script setup></script>
   
   <style lang="scss" scoped></style>
   

   register.vue:

   <template>
     <div>register</div>
   </template>
   
   <script setup></script>
   
   <style lang="scss" scoped></style>
   

2. 创建路由规则（路由与组件的映射关系）列表，并作为路由列表：

   import { createRouter, createWebHistory } from 'vue-router'
   
   const routes = [
       {
           path: '/', // router-link组件默认展示path为'/'对应的组件
           component: () => import('@/views/login.vue')
       },
       {
           path: '/register', // router-link组件默认展示path为'/'对应的组件
           component: () => import('@/views/register.vue')
       }
   ]
   
   const router = createRouter({
       history: createWebHistory(),
       routes
   })
   
   export default router
   

3. 在App组件内需要展示通过路由跳转进行展示的位置，放置<router-view>组件。

   <template>
     <router-link to="/">login</router-link>
     <router-link to="/register">register</router-link>
     <router-view></router-view>
   </template>
   
   <script setup></script>
   
   <style lang="scss" scoped></style>