【Vue】Vue 中如何点击跳转页面

波吉

已于 2022-04-11 11:00:08 修改

阅读量2.6w

点赞数 14

分类专栏： Vue 文章标签： vue.js

于 2020-03-02 11:12:07 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42678675/article/details/104607441

版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何使用编程式路由进行页面跳转。通过在router/index.js中注册组件路由信息，包括路径和名称，然后在目标页面添加@click事件，最后在app.vue中加入<router-view/>来实现页面的动态显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2022-04-11更新：完整的跳转页面方法的详解：【Vue | 补洞 | 18】编程式路由导航

思路：在有路由的情况下，对页面进行注册，并通过方法对路由中的实例（页面）进行转发，达到跳转页面的效果

1、在 router 目录下的 index.js 中加入组件的路由信息，包括路径、名称

import vMarkDown from '@/components/v-markDown'
routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/',
      name:'v-markDown',
      component:vMarkDown
    }
  ]

【Vue】Vue 中如何点击跳转页面

1、在 router 目录下的 index.js 中加入组件的路由信息，包括路径、名称

2、在要实现跳转的页面中加入 @click 事件

3、在 app.vue 中加入 <router-view /> 来显示