Vue3 实现路由跳转

一、安装 vue-router

npm install vue-router@4

二、新建 vue 页面

在 src 目录下新建 view 目录用来存放 vue 的页面。

然后在 view目录下新建两个 vue 页面，分别是 login.vue 和 register.vue。

2.1 login.vue

<template>
  <div>
    当前是登录页面
  </div>
</template>
<script>
export default {
  name: "login"
}
</script>
<style scoped>
</style>

2.2 register.vue

<template>
  <div>
    当前是注册页面
  </div>
</template>
<script>
export default {
  name: "register"
}
</script>
<style scoped>
</style>

三、新建路由文件

在 src 目录下新建 router 目录用来存放路由配置的页面。

3.1 新建 index.js

在 router 目录下新建 index.js 配置路由。

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;

目前 routes 里面还没有路由路径等内容，因此我们要再新建一个 routes.js文件。

3.2 新建 routes.js

还是在 router 目录下新建 routes.js

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

导入刚刚新建的 vue 页面，然后和 path 绑定在一块。

四、在 App.vue 中配置路由的跳转

<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>

注意要使用 router-link 标签来进行路由的跳转。

el-button是我这边 Element UI 的控件，如果没安装，可以不使用。

最最重要的一点来了：
一定要使用 <router-view/>而不是 <router-view></router-view>
一定要使用 <router-view/>而不是 <router-view></router-view>
一定要使用 <router-view/>而不是 <router-view></router-view>

重要的事情说三遍，使用 <router-view></router-view>会导致跳转后的页面无法加载出来。

五、在 main.js 中 use 路由

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')

六、结果

6.1 默认页面

6.2 点击登录

6.3 点击注册