前言

vue-router 是 Vue.js 官方推荐路由管理器。它和 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得易如反掌。vue-router 用于构建单页面应用程序，允许你通过定义路由规则，实现应用内容的不刷新切换。它允许你为不同的路径设置对应的组件，实现视图与 URL 的同步。本文介绍引用配置路由vue-router。

一、安装路由

安装：

pnpm i vue-router

小插曲：

报错说证书无效，不管他啥原因了关掉算了：

pnpm config set strict-ssl false

二、配置路由

安装成功后新建router目录，新建index.ts：

//路由器
import {createRouter,createWebHistory} from 'vue-router'

import Home from '@/components/Home.vue'
import HelloSH from '@/components/HelloSH.vue'

//创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/hellosh',
            component:HelloSH
        }
    ]
})

export default router

其中component配置的两个组件都创建好：

<template>
  <v-container class="fill-height">
    <v-responsive class="align-center text-center fill-height">
      <v-img height="300" src="@/assets/logo.svg" />

      <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>

      <h1 class="text-h2 font-weight-bold">Vuetify</h1>

      <div class="py-14" />

      <v-row class="d-flex align-center justify-center">
        <v-col cols="auto">
          <v-btn
            href="https://vuetifyjs.com/components/all/"
            min-width="164"
            rel="noopener noreferrer"
            target="_blank"
            variant="text"
          >
            <v-icon
              icon="mdi-view-dashboard"
              size="large"
              start
            />

            Components
          </v-btn>
        </v-col>

        <v-col cols="auto">
          <v-btn
            color="primary"
            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
            min-width="228"
            rel="noopener noreferrer"
            size="x-large"
            target="_blank"
            variant="flat"
          >
            <v-icon
              icon="mdi-speedometer"
              size="large"
              start
            />

            Get Started
          </v-btn>
        </v-col>

        <v-col cols="auto">
          <v-btn
            href="https://community.vuetifyjs.com/"
            min-width="164"
            rel="noopener noreferrer"
            target="_blank"
            variant="text"
          >
            <v-icon
              icon="mdi-account-group"
              size="large"
              start
            />

            Community
          </v-btn>
        </v-col>
      </v-row>
    </v-responsive>
  </v-container>
</template>

<script setup lang="ts">
  //
</script>

<template>
    <div>
        <h3>home</h3>
    </div>
</template>

<script setup lang='ts'>
</script>

<style lang='less' scoped>
</style>

然后main.ts中import并use：

运行可看到路由组件：

地址栏输入http://localhost:3000/home:

可以看到路由生效了，但是页面没有展示出home，那么：

源码：

<template>
  <v-app>
    <v-main>
      <!-- <HelloSH /> -->
      <div>这是导航</div>
      <div>
        <router-view></router-view>
        <RouterView></RouterView>
      </div>
    </v-main>

  </v-app>
</template>

<script lang="ts">
import HelloSH from "@/components/HelloSH.vue";
import { RouterView } from "vue-router";

export default {
  components: {HelloSH}
}
</script>

运行：

注意我添加了两个RouterView，两种写法都可以。
切换url：http://localhost:3000/hellosh

总结

基本的安装和配置，简单的使用，实战跟着操作一下就很简单并且加深理解。over。