vue3后台项目 如何使用router-link实现路由跳转功能
时间: 2024-05-12 07:15:39 浏览: 16
在Vue3中,使用`router-link`实现路由跳转功能需要三个步骤:
1. 安装Vue Router
在项目中安装Vue Router:
```
npm install vue-router@4.x --save
```
2. 配置路由
在`src`目录下创建一个`router`文件夹,并在该文件夹下创建一个`index.js`文件:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
```
在`routes`数组中定义各个路由的路径、名称和对应的组件。
3. 使用`router-link`标签
在需要使用路由跳转的组件模板中,使用`router-link`标签:
```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
其中,`to`属性指定要跳转的路由路径。
以上就是使用`router-link`实现路由跳转的基本步骤。