vue.router安装和使用以及tab切换

vue.router安装和使用

一、安装：npm install vue-router或cnpm install vue-router或yarn add vue-router（推荐用cnpm安装）在vue终端下安装 如果components中显示vue-router则安装成功，注意package.json中有没有版本号 没有需要加上
二、在src下新建router.js，在router.js中引用如下代码import Vue from 'vue’import VueRouter from 'vue-router’Vue.use(VueRouter)
三、在src中新建view文件夹，在view新建：Home文件夹，在文件夹中新建index.vue，引入content组件（注意路径一定要正确）

四、在router.js中设置如下两步1、import Home from './views/Home/
2、export default new VueRouter ({ routes: [ { path: ‘/’, redirect: ‘/home’ //设置默认指向 }, { path: ‘/home’, component: Home } ]})
五、在App.vue中的div内引入
六、在main.js中 import router from ‘./router’在new的实例中增加router
这时就可以了

tab切换

一、在component新建三个组件 text1 text2 text3
二、在router.js引入组件
import Text1 from ‘./components/Text1’
import Text2 from ‘./components/Text2’
import Text3 from ‘./components/Text3’
三、在router.js中home路由下加如下代码
children:[ { path: ‘text1’, component: Text1, }, { path: ‘text2’, component: Text2, }, { path: ‘text3’, component: Text3, } ]
此时就可以切换了，但是还有一个小问题，就是我们需要让它默认显示test1的内容，这时我们需要加上如下代码：

{ path: ‘/’, redirect: ‘/text1’ //设置默认指向 },