vite - vue3 项目路由的使用

目录

一、安装

二、添加路由

三、在main.ts中加入路由

四、在App.vue 添加导航，并使用router-view

五、显示页面效果

---

一、安装

npm install vue-router@4

二、添加路由

新建router文件夹，新建文件 index.ts 

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
const routes = [
  {
    path: "/login",
    component: () => import("../views/Login.vue"),
  },
  {
    path: "/",
    component: () => import("../views/Index.vue"),
  },
];
//createRouter:用于创建一个路由实例,这里router是一个变量，用于存储即将创建的路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
// 导出路由
export default router;

三、在main.ts中加入路由

import { createApp } from 'vue'
import App from './App.vue'
//1.加入路由
import router from './router/index';
//2.通过路由使用路由
createApp(App).use(router).mount('#app')

四、在App.vue 添加导航，并使用router-view

<template>
  <router-link to="/login">登录</router-link>
<br/>
  <router-link to="/">主页</router-link>

  <router-view></router-view>
</template>
<script setup lang="ts">
// 导入ref
import { ref } from "vue";
</script>

五、显示页面效果