4：vue-router

要求：要想达到的效果：

GIF3.gif

前篇文章我们学习完如何组件拆分后，接下来我们来做Vue-router啦

1：首先我们去访问Vue-router的官网看介绍 http://router.vuejs.org/zh-cn/essentials/getting-started.html

安装Vue-router：请看我的简书文章“1:在windows下搭建Vue2.0学习环境”

Paste_Image.png

App.vue

<pre>
<template>
<div>
<v-header></v-header>
<div class="tab border-1px">
<div class="tab-item">



<router-link to='/goods'>商品</router-link>
</div>
<div class="tab-item">
<router-link to='/ratings'>评论</router-link>
</div>
<div class="tab-item">
<router-link to='/seller'>商家</router-link>
</div>
</div>


<router-view></router-view>
</div>
</template>

<script>
//import注册header组件
import header from './components/header/header.vue';
//export default 导出一个对象
components:{
'v-header': header
}
};
</script>

<style lang="stylus" rel="stylesheet/stylus">

/*@import "./common/stylus/mixin.styl"*/

.tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    //position: relative
    //border-1px(rgba(7,17,27,0.1))
    border-bottom : 1px solid rgba(7,17,27,0.1)


    .tab-item
       flex: 1
       text-align: center
       display:block
       font-size: 14px
       color :rgb(77,85,93)
    .router-link-active {
        color: red;
      }

</style>
</pre>

main.js

<pre>
import Vue from 'vue';
import App from './app.vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';

//1:定义（路由）组件,从其他文件 import 进来
import Goods from './components/goods/goods.vue';
import Ratings from './components/ratings/ratings.vue';
import Seller from './components/seller/seller.vue';

// import Stylsss from './common/stylus/index.styl';
// Vue.use(Stylsss);

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
Vue.use(VueRouter);
Vue.use(VueResource);

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。

const routes=[
{ path:'/goods',component:Goods },
{ path:'/ratings',component:Ratings },
{ path:'/seller',component:Seller }
]

// 3. 创建 router 实例，然后传 routes 配置
const router = new VueRouter({
routes
// （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app=new Vue({
el:'#app',
router,
//挂载App.vue這個組件
render: h => h(App)
})
//也可以使用下面代码，同样效果
// new Vue({
// router,
// render: h => h(App)
// }).$mount('#app');

//另外可以设置默认路由是goods
router.push('/goods') ;

</pre>