Vue-Router使用

1. 安装

npm install vue-router@4

vue项目的package.json文件会自动增加如下依赖：

2. 添加路由
在src目录下新建router/index.ts

import { createRouter, createWebHashHistory } from "vue-router";


//添加路径
const routes = [
    {
        path: '/login',
        component: () => import("../views/Login.vue")
    }
]
 
 
const router = createRouter({
    history: createWebHashHistory('/'),
    routes
})

export default router

3. 在main.ts文件加入路由

import { createApp } from 'vue'
import App from './App.vue'
//导入我们的路由文件
import Router from  './router/index'
const app = createApp(App)
//实用路由
app.use(Router)
app.mount('#app')

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

<template>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--<router-link> 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
   
  <p>
    <router-link to="/login">登录</router-link>
  </p>
  <hr />
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</template>

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

5.结果显示