vue 中实现下拉菜单页面跳转的方式有两种：使用 v-on:click 指令和 router-link 组件，通过为下拉菜单选项添加 v-on:click 指令和处理函数来实现页面跳转。使用 router-link 组件，通过为下拉菜单选项添加 router-link 组件并设置 to 属性来实现页面跳转。

Vue 下拉菜单实现页面跳转

在 Vue 中，可以通过 v-on:click 指令和 router-link 组件实现下拉菜单选项的页面跳转。

方式 1：使用 v-on:click 指令

1. 在下拉菜单选项上添加 v-on:click 指令。
2. 为指令提供一个函数，其中包含跳转到目标页面的代码。

<template><ul>
<li>Option 1</li>
    <li>Option 2</li>
  </ul></template><script>
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const handleOptionClick = (page) => {
      router.push('/' + page)
    }

    return {
      handleOptionClick
    }
  }
}
</script>

方式 2：使用 router-link 组件

立即学习“前端免费学习笔记（深入）”；

1. 使用 router-link 组件包装下拉菜单选项。
2. 为 router-link 组件设置 to 属性，指定目标页面的路径。

<template><ul>
<router-link to="/page1">Option 1</router-link><router-link to="/page2">Option 2</router-link>
</ul></template>

以上就是vue下拉菜单怎么跳转的详细内容，更多请关注php中文网其它相关文章！