专注app软件定制开发Vue3 实现路由跳转

一、安装 vue-router

npm install vue-router@4
1

二、新建 vue 页面

在 src 专注app软件定制开发目录下新建 view 专注app软件定制开发目录用来存放 vue 的页面。

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

2.1 login.vue

<template>  <div>    当前是登录页面  </div></template><script>export default {  name: "login"}</script><style scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2 register.vue

<template>  <div>    当前是注册页面  </div></template><script>export default {  name: "register"}</script><style scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

三、新建路由文件

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

3.1 新建 index.js

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

import {createRouter, createWebHistory} from 'vue-router'import routes from './routes'    // 导入 router 目录下的 router.jsconst router = createRouter({	history: createWebHistory(process.env.BASE_URL),	routes})export default router;
1
2
3
4
5
6
7
8

目前 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

导入刚刚新建的 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

注意要使用 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')
1
2
3
4
5
6
7
8
9
10

六、src 目录结构

src│  App.vue│  main.js│      ├─router│      index.js│      routes.js│      └─view        login.vue        register.vue
1
2
3
4
5
6
7
8
9
10
11

七、结果

7.1 默认页面

7.2 点击登录

7.3 点击注册