手把手教你Vue3实现路由跳转

npm install vue-router@4

<template>
  <div>
    当前是登录页面
  </div>
</template>

<script>
export default {
  name: "login"
}
</script>

<style scoped>
</style>

<template>
  <div>
    当前是注册页面
  </div>
</template>

<script>
export default {
  name: "register"
}
</script>

<style scoped>
</style>

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'    // 导入 router 目录下的 router.js

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes
})
export default router;

import Register from '@/view/register.vue'
import Login from '@/view/login.vue'

const routes = [
    {
        name: 'login',
        path: '/login',
        component: Login
    },
    {
        name: 'register',
        path: '/register',
        component: Register
    }
];
export default routes

<template>
<div id = "app">
	<p>
	  <el-button>
            <router-link to="/login">登录</router-link>
	  </el-button>
          
	  <el-button>
            <router-link to="/register">注册</router-link>
	  </el-button>
	</p>
	<router-view/>
	</div>
</template>

<script>
// App.vue 的名称叫 app
    export default {
        name: 'app'
    }
</script>

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router/index' // 加载 router 底下的 index.js 路由配置文件

const app = createApp(App)
app.use(router)		
app.use(ElementPlus) // 没安装 Element UI 可以不用
app.mount('#app')