vue tab切换效果

实现步骤

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
path: '',
redirect: '/home/text1'  //设置默认指向（一般只使用一次）
},
{
path: 'text1',
component: Text1,
},
{
path: 'text2',
component: Text2,
},
{
path: 'text3',
component: Text3,
}
]

},
]
})

3、在Home文件夹的index.vue页面引入以下代码：

• router-view是页面渲染的意思。
  4、运行效果如下（点击切换页面）：