您现在的位置是：网站首页> 编程资料编程资料

手把手教你Vue3实现路由跳转_vue.js_

2023-05-24 340人已围观

简介手把手教你Vue3实现路由跳转_vue.js_

一、安装 vue-router

npm install vue-router@4

二、新建 vue 页面

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

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

2.1 login.vue

2.2 register.vue

三、新建路由文件

在 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 中配置路由的跳转

注意要使用 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')