vue3--Vue-Router使用

1. 安装

npm install vue-router@4

2. 添加路由

新建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")
    }
]

const router = createRouter({
   // history: createWebHashHistory('/'),
    history: createWebHistory(),
    routes
})

export default router

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

import { createApp } from 'vue'
import App from './App.vue'

//加入路由
import router from './router/index';
//并通过use，使用路由
createApp(App).use(router).mount('#app')

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

<template>

  <router-link to="/" >首页</router-link> <br/>
  <RouterLink to="/login">登录页面</RouterLink>

  <hr/>


  <router-view></router-view>

</template>

5. 查看效果