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

阳光穿透心脏的1/2处 2023-07-10 11:22 53阅读 0赞

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

--------------------

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70][]

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

![20200302111120930.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200302111059741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70
[20200302111120930.png]: https://img-blog.csdnimg.cn/20200302111120930.png

发表评论取消回复

表情：

评论列表（有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue点击按钮跳转页面

在Vue.js中，你可以使用<router-link>或this.$router.push()来实现点击按钮跳转页面的功能，前提是你已经配置了Vue Router。以下是两种不

女爷i/ 2024年02月20日 10:45/ 0 赞/ 177 阅读

相关 vue点击按钮实现页面跳转

vue点击按钮实现页面跳转 1.安装vue-router： npm install vue-router 2.在main.js中引入并使用vue-rou

桃扇骨/ 2023年10月04日 23:03/ 0 赞/ 78 阅读

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

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

阳光穿透心脏的1/2处/ 2023年07月10日 11:22/ 0 赞/ 54 阅读

相关【PyQt5】designer 页面点击按钮跳转页面

PyQt5 页面跳转使用 designer 进行开发 PyQt5 实现两个页面跳转 PyQt5 实现多个页面跳转实

向右看齐/ 2023年02月18日 06:27/ 0 赞/ 127 阅读

相关微信小程序点击按钮跳转页面

> wxml <button bindtap="goToNotice" ></image></button> > js Page({ dat

我会带着你远行/ 2022年11月11日 13:22/ 0 赞/ 395 阅读

相关 HTML 中点击 标签,页面跳转执行过程

HTML链接使用的是<a>标签点击超链接,后台的执行大致如下: <a href="https://www.baidu.com">超

本是古典何须时尚/ 2022年06月01日 08:20/ 0 赞/ 478 阅读

相关 Flask中input点击跳转页面

<li><input type="button" id="modifytip" class="modify" name="modifytip" value="修改"

我不是女神ヾ/ 2022年04月13日 09:59/ 0 赞/ 483 阅读

相关 uni-app中v-for点击跳转指定页面2

<template> <view>  <view class="banner" @click="goLogin"> <

你的名字/ 2022年02月01日 23:19/ 0 赞/ 396 阅读

相关 uni-app中v-for点击跳转指定页面

<template> <view>  <view class="banner" @click="goLogin"> <

ゝ一纸荒年。/ 2022年02月01日 23:11/ 0 赞/ 767 阅读

相关 jquery点击div跳转页面

<div onclick="window.open('http://www.baidu.com')">在新窗口跳转至百度</div> <di

一时失言乱红尘/ 2021年09月30日 11:36/ 0 赞/ 737 阅读