vue tab切换效果

最新推荐文章于 2024-09-12 11:28:00 发布

梦迹karry

最新推荐文章于 2024-09-12 11:28:00 发布

阅读量394

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_44719477/article/details/107557895

版权

本文介绍了如何在Vue中实现Tab切换效果。通过在components文件夹下创建多个组件，并在router.js及Home/index.vue中配置相关代码，实现点击切换不同页面的效果。

摘要由CSDN通过智能技术生成

实现步骤

1、首先你要在components文件夹下写几个组件（你要实现切换几个页面的切换就写几个）页面，我这里以三个页面为例（命名为Text1、Text2、Text3）。
2、在router.js中引入以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from './view/Home/'  
//Home是我上一篇文章创建的页面，这里可以改成自己创建的页面

// 组件

import Text1 from './components/Text1'
import Text2 from './components/Text2'
import Text3 from './components/Text3'

export default new VueRouter ({
    // 配置路由信息
    routes: [
      {
        path: '/',
        redirect: '/home'  //设置默认指向（一般只使用一次）
      },
      {
        path: '/home',
        component: Home,
        // Vue中使用children实现路由的嵌套
          // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
          // 否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
          children:[
            {   //默认显示text1