vue3点击跳转路由定义路由
时间: 2023-11-26 22:03:48 浏览: 37
以下是Vue3中点击跳转路由定义路由的步骤:
1. 在router.js文件中定义路由,例如:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
```
2. 在需要跳转的组件中,使用`<router-link>`标签来实现跳转,例如:
```html
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>
```
3. 如果需要在组件中使用JavaScript代码来实现跳转,可以使用`$router.push()`方法,例如:
```javascript
async pageJump() {
await this.$router.push({ name: 'Cx', params: { year: new Date().getFullYear()+'' } })
}
```
4. 如果需要在跳转后执行一些操作,可以在跳转到的组件中使用`activated()`函数,例如:
```javascript
activated() {
this.init()
}
```