npm install vue-router@4
在 src
目录下新建 view
目录用来存放 vue
的页面。
然后在 view
目录下新建两个 vue
页面,分别是 login.vue
和 register.vue
。
<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>
在 src
目录下新建 router
目录用来存放路由配置的页面。
在 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
文件。
还是在 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
绑定在一块。
<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
框架的控件,如果没安装,可以不使用。
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
│ App.vue
│ main.js
│
├─router
│ index.js
│ routes.js
│
└─view
login.vue
register.vue