首页 > 其他分享 >vue3 点击按钮跳转到对应的tab页面

vue3 点击按钮跳转到对应的tab页面

时间:2024-03-31 22:33:09浏览次数:25  
标签:about vue import 跳转 tab vue3 router path

 大家好呀,我又来记录一下啦

实现功能:点击”查看“按钮,跳转到对应的tab页面

方法:router

按钮部分:

<el-button size="small" @click="check(scope.row.name)">查看</el-button>

对应的方法:

check(){
          this.$router.push({path:'/about'})
        },

router:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import CataLogueView from '../views/CataLogueView.vue'

const routes = [
  {
    path: '/',
    name: '目录',
    component: CataLogueView
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

这样子就可以实现跳转啦,是不是并没有很难,加油!

标签:about,vue,import,跳转,tab,vue3,router,path
From: https://blog.csdn.net/luciyana/article/details/137211232

相关文章

  • Vite + Vue3 项目的创建 ,启动 ,停止
    第一步:使用命令行创建工程在磁盘的合适位置上,创建一个空目录用于存储多个前端项目用vscode打开该目录在vocode中打开命令行运行如下命令npmcreatevite@latest第一次使用vite时会提示下载vite,输入y回车即可,下次使用vite就不会出现了注意:选择vue+JavaScript选项即可......
  • CompletableFuture 异步编排的简单使用
    目录1、创建异步对象2、计算完成时回调方法3、handle方法4、线程串行化方法5、两任务组合-都要完成6、两任务组合-一个完成7、多任务组合如果在我们的业务中某些功能需要其他一些功能执行完成之后才能开始执行(比如获取其他功能的返回结果),这样就需要用到异步编排......
  • 9.折磨了一周的springboot样式跳转
    大致是这样的springboot一个项目将头部和侧部公共部分都提取出来但是一点击员工怎么侧边样式一直失败我看F12报错说的什么cavas渲染加上了还是错啊因为我是侧边栏的问题我的Controller跳转肯定没错这个真是让我难受了一周多因为还差增删改查就设计完毕了这个坑一......
  • Stable Diffusion的微调方法详解
    StableDiffusion作为一种强大的文本到图像生成模型,已经在艺术、设计和科研等多个领域取得了广泛的应用。然而,为了使其更好地适应特定任务或领域,微调(Fine-tuning)技术显得尤为重要。本文将详细介绍StableDiffusion的微调方法,包括数据准备、模型结构选择、训练策略等多个方面......
  • 前后端问题整理 持续更新 附赠Vite+Vue3+Ts项目配置
    问题整理(Vite,Vue(1-3)|.NET)持续更新目录问题整理(Vite,Vue(1-3)|.NET)持续更新前端@项目配置1.node版本过高问题安装nvm管理node版本2.镜像证书无效问题3.npm版本问题4.npminstall证书过期问题5.yarn命令无法使用问题6.ViteVue项目搭建npmrundev错误nod......
  • arco-design 组件库中用 table 组件,做金额合计 sum
    <a-table:columns="columns":data="data":scroll="scroll":summary="summary"><template#summary-cell="{column,record,rowIndex}"><div:style="getColorStyle(column,record)&......
  • .NET DataTable 去重过滤高级算法
     ///<summary>///过滤DataTalbe添加处理(使用hashkey处理)最快///</summary>///<paramname="dataTable"></param>///<paramname="selectedNodes"></param>///<returns></returns>publicDataTabl......
  • PHP 跳转搜索(Jump Search)
            与二分搜索一样,跳转搜索是一种针对排序数组的搜索算法。基本思想是通过按固定步骤向前跳跃或跳过某些元素来代替搜索所有元素来检查更少的元素(比线性搜索)。例如,假设我们有一个大小为n的数组arr[]和一个大小为m的块(要跳转)。然后我们在索引arr[0]、arr[m]......
  • UE4 c++ 通过枚举寻找DataTable中的数据
    DataTable中的数据DataTable中每一行数据是一个结构体在C++代码中定义结构体,然后可以在蓝图中可以创建以此结构体为单元的DataTable枚举变量定义一个头文件来存储枚举变量,然后可以在要使用的文件中利用MyEnumPtr=FindObject<UEnum>(ANY_PACKAGE,TEXT("EGridShapEnum"),tr......
  • AI绘图:Stable Diffusion WEB UI 详细操作介绍:进阶-面部修复和调参
    结合两篇文章完成了本地部署和基础操作,现在我们来介绍下进阶内容:面部修复,高清修复和调参区。一:脸部修复面部修复的适用在画真人、三次元的场景,特别是在画全身的时候一般在画全身,由于脸部占比的空间比较小,那么绘制出来的效果就会比较差1.面部修复SD支持直接一键进行脸部修......