一、安装 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框架的控件，如果没安装，可以不使用。
五、在 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')
六、src 目录结构
src
│ App.vue
│ main.js
│
├─router
│ index.js
│ routes.js
│
└─view
login.vue
register.vue
七、结果
7.1 默认页面
7.2 点击登录
7.3 点击注册
总结
到此这篇关于Vue3实现路由跳转的文章就介绍到这了,更多相关Vue3路由跳转内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！