给router-link设置成div

时间: 2023-10-20 17:02:08 浏览: 191

Vue 页面跳转不用router-link的实现代码

Vue 页面跳转不用 router-link 的实现代码本文主要介绍了 Vue 页面跳转不用 router-link 的实现代码，文中给大家介绍了 Vue router-link 跳转传值示例，需要的朋友可以参考下。 Vue router-link 是 Vue.js 官方提供的客户端路由器，它可以实现页面之间的跳转。但是，在某些情况下，我们可能不想使用 router-link 来实现页面跳转。这时，我们可以使用其他方法来实现页面跳转。下面是一个使用 Vue 实现页面跳转不用 router-link 的示例代码：在模板中，我们可以使用 v-if 指令来控制页面的显示和隐藏。例如： ```html <div v-if="!addShow" class="function">  <el-row> <template slot-scope="scope"> <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button> </template> </el-row> </div>  <div v-if="addShow" class="add-category ">  </div> ``` 在上面的代码中，我们使用 v-if 指令来控制两种不同的页面显示和隐藏。当 `addShow` 为 `true` 时，显示第二个页面；否则，显示第一个页面。在 JavaScript 部分，我们可以使用数据绑定来控制页面的显示和隐藏。例如： ```javascript export default { data() { addShow: false, // 设置要显示的页面部分默认为 false，隐藏 checkdDistributor: null, }, methods: { handleEdit(index, row) { this.checkdDistributor = row; // 接受传参 this.addShow = true; // addshow 为要显示的页面 } }, watch: { checkdDistributor() { for (let attr in this.formData) { this.formData[attr] = ('' + this.checkdDistributor[attr]); // 写入参数 } } } } ``` 在上面的代码中，我们使用 `addShow` 变量来控制页面的显示和隐藏。当 `handleEdit` 方法被调用时，我们将 `addShow` 设置为 `true`，从而显示第二个页面。我们可以使用 router-link 跳转传值示例来实现页面跳转。例如： ```html <router-link :to="{ name: 'deitail', params: { freezeMon: '2017-10', owerName: '西安' } }" tag="div" ></router-link> ``` 在上面的代码中，我们使用 router-link 组件来实现页面跳转，并传递参数给目标页面。本文介绍了 Vue 页面跳转不用 router-link 的实现代码，包括使用 v-if 指令控制页面显示和隐藏、使用数据绑定控制页面显示和隐藏，以及使用 router-link 跳转传值示例实现页面跳转。

要将 `router-link` 设置为 `div`，可以使用 `tag` 属性来指定要渲染的 HTML 标签。在这种情况下，您可以将 `tag` 属性设置为 `'div'`，以将 `router-link` 渲染为 `div`。以下是一个示例： ```html <router-link to="/path" tag="div"> Click me! </router-link> ``` 在上面的示例中，`router-link` 将被渲染为一个 `div` 元素，并且点击它将导航到 `/path`。

阅读全文

给router-link设置成div

相关推荐

详解如何使用router-link对象方式传递参数？

vue路由 遍历生成复数router-link的例子

<template> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </template>是什么意思

<template id="rootTemp"> <router-link to='/goodslist'>商品列表</router-link> <router-link to='/goodsdetails'>商品详情</router-link> <router-link to='/mycart'>我的购物车</router-link> <router-view :toys="toys"></router-view> </template>运用到哪些知识点

<router-link active-class="active" :to="{ name: 'personal' }">个人用户注册</router-link> <router-link active-class="active" :to="{ name: 'enterprise' }">企业用户注册</router-link>如何在vue3中默认设置个人用户为高亮，点击企业用户注册时高亮变更

<template> <router-link to="/function">奖学金评选资格功能</router-link> <router-link to="/instruction">奖学金评选资格功能说明</router-link> <router-view></router-view> </template>

router-link设置禁用

router-link-active router-link-exact-active有什么用

<template> <router-link to="/user">用户</router-link> <MainPage></MainPage> <router-view></router-view>

存在多个router-view ，对应、 router-link 和 router-view 如何匹配

router-link，router-view、

router-view和router-link对应关系

router-link 和 router-view 如何匹配

router-link 和 router-view 如何关联起来

vue2脚手架，如何在轮播图中用<router-link></router-link>代替

使用 router-view 和 router-link 实现嵌套路由

router-link，router-view是咋用的

最新推荐

【超强组合】基于VMD-星雀优化算法NOA-Transformer-BiLSTM的光伏预测算研究Matlab实现.rar

【java毕业设计】高校四六级报名管理系统源码（ssm+jsp+mysql+说明文档+LW）.zip

探索数据转换实验平台在设备装置中的应用

管理建模和仿真的文件

ggflags包的国际化问题：多语言标签处理与显示的权威指南

如何使用MATLAB实现电力系统潮流计算中的节点导纳矩阵构建和阻抗矩阵转换，并解释这两种矩阵在潮流计算中的作用和差异？

使用git-log-to-tikz.py将Git日志转换为TIKZ图形

"互动学习：行动中的多样性与论文攻读经历"

ggflags包的定制化主题与调色板：个性化数据可视化打造秘籍

如何使用Matlab进行风电场风速模拟，并结合Weibull分布和智能优化算法预测风速？

vue路由遍历生成复数router-link的例子

<template> <router-link to="/user">用户</router-link>
<MainPage></MainPage> <router-view></router-view>