vue的路由，以及用路由完成tab切换

1.首先要下载router
在终端上输入 cnpm install vue-router 或者yarn add vue-router 或者npm install vue-router

2.在src文件里创建router.js文件并引入以下代码
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

3.在src中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue，把下面的代码放进去

<template>
  <div id="home">
      <Content />
  </div>
</template>
<script>
  import Content from "../../components/Content.vue"
  export default {
    name: "index",
    data(){
        return{
        }
    },
    components:{
        Content,
    },
    methods:{
    }
  }
</script>
<style scoped>
</style>

4、在router.js中设置如下两步
1、import Home from './views/Home/'
2、

export default new VueRouter ({
    routes: [
      {
        path: '/',
        redirect: '/home'  //设置默认指向
      },
      {
        path: '/home',
        component: Home
      }
    ]
})

5、在App.vue中的div内引入

<router-view></router-view>

6、在main.js中 import router from ‘./router’
在new的实例中增加router，具体如下：

这时打开浏览器就能看到Home文件夹，在文件夹中index.vue里面所写的内容了，因为我这index.vue代码中引入的一个组件，所以要新建一个组件才能正常运行，如果不想新建就把删掉。

用路由完成tab切换（在路由中嵌入路由）
我创建了三个自定义组件,放在components文件里 Text1.vue,Text2.vue,Text2.vue，

然后在router.js中引入他们

假设在第一个路由home中嵌入路由，这样写即可，直接附上router.js的全部代码

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

import Home from './views/Home/'
import List from './views/List/'
// 组件

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:[
            {
              path: '/',
              component: Text1,
            },
            {
                path: 'text1',
                component: Text1,
              },
            {
              path: 'text2',
              component: Text2,
            },
            {
              path: 'text3',
              component: Text3,
            }
          ]
      },
      {
        path: '/list',
        component: List
      }
    ]
})

为了让其进入页面就默认选中第一个，所有Text1写了两次，第一次path: '/',是为了进入页面默认选中，第二次path: 'text1',是为了再次点击后正常显示。
可以看见我在第一个路由home中嵌入了children来实现嵌入路由，这时就可以在网页中来实现Tab
切换实现路由的切换，点击即可切换。



对了，要补充一点，前边我没写出来写完路由后怎么引用。
路由写完后 要在引用路由的地方使用
如下图

xxxx是router.js里routes定义的path,如下图