vue中用vue-router实现的列表切换

这个列表切换是在vue-router的基础上进行配置的
1.先在components里面创建几个组件
2.然后在router.js里面添加代码

import Text1 from './components/Text1'

import Text2 from './components/Text2'

import Text3 from './components/Text3'

3.在router.js里面我们需要在当前显示的页面的路由中添加代码

routes: [
      {
        path: '/',
        redirect: '/list'  //设置默认指向
      },
      {
        path: '/home',
        component: Home,
        // Vue中使用children实现路由的嵌套
          // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
          // 否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
          children:[
            {
              path: '/',
              redirect: 'text1'
            },
            {
              path: 'text1',
              component: Text1,
            },
            {
              path: 'text2',
              component: Text2,
            },
            {
              path: 'text3',
              component: Text3,
            }
          ]
      },
      {
        path: '/list',
        component: List
      }
    ]

4.你可以在任意页面中添加

添加后即可完成简单设置

效果图：