vue3点击跳转路由

在Vue3中，可以使用`<router-link>`标签或者`$router.push()`方法来实现点击跳转路由的功能。

下面是两种实现方式的示例代码：

1. 使用`<router-link>`标签

<template>
  <router-link to="/about">About</router-link>
</template>

2. 使用`$router.push()`方法

<template>
  <button @click="goToAbout">Go to About</button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
})
</script>

需要注意的是，使用`<router-link>`标签需要先在组件中导入`router`对象，而使用`$router.push()`方法则需要在组件中混入`router`对象。

相关问题

vue3点击跳转路由定义路由

以下是Vue3中点击跳转路由定义路由的步骤：

1. 在router.js文件中定义路由，例如：

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>`标签来实现跳转，例如：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

3. 如果需要在组件中使用JavaScript代码来实现跳转，可以使用`$router.push()`方法，例如：

async pageJump() {
  await this.$router.push({ name: 'Cx', params: { year: new Date().getFullYear()+'' } })
}

4. 如果需要在跳转后执行一些操作，可以在跳转到的组件中使用`activated()`函数，例如：

activated() {
  this.init()
}

vue3点击按钮跳转路由

在Vue 3中，你可以使用Vue Router来实现路由跳转。下面是一个简单的示例：

首先，确保你已经安装了Vue Router。可以使用以下命令进行安装：

npm install vue-router@next

接下来，在你的Vue应用程序的入口文件（例如main.js）中，导入Vue Router，并且使用`createRouter`函数创建一个路由实例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 在这里定义你的路由配置
    // 示例：定义一个名为Home的路由
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 示例：定义一个名为About的路由
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

在上面的代码中，我们定义了两个路由：'/'和'/about'，分别对应了Home和About组件。

然后，在你的组件模板中，你可以使用`<router-link>`来创建一个可以点击的链接，用于跳转到指定的路由：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
      // 或者使用命名路由
      // this.$router.push({ name: 'About' })
    }
  }
}
</script>

在上面的代码中，我们使用`<router-link>`来创建两个链接，分别跳转到'/'和'/about'。另外，我们还在按钮的点击事件中使用`$router.push()`来实现路由跳转，可以传递一个路径或者一个包含名称的对象。

这样，当你点击链接或者按钮时，就可以实现路由的跳转了。记得在你的组件中引入所需的路由组件（例如Home和About）并进行相应的配置。