Vue-router初识

1.标签设置：点击（router-link），展示（router-view）

    路由目的地：

:to="{path:'goods'}"

<template>
  <div id="app">
    <v-header :seller= 'seller'></v-header>
    <div class="tab">
      <div class="tab-item">
        <!-- router-link :to，替代vue1.x中a标签使用路由 -->
        <router-link :to="{path:'goods'}">商品</router-link>      

    </div>

      <div class="tab-item">
        <router-link :to="{path:'ratings'}">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{path:'seller'}">商家</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>


</template>

2.main.js 路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'				//使用路由
import VueResource from 'vue-resource'			//使用resource
import App from './App.vue'
import goods from './components/goods/goods'	//定义组件
import ratings from './components/ratings/ratings'
import seller from './components/seller/seller'




Vue.use(VueRouter);								//注册路由
Vue.use(VueResource);							//注册resource


const routes =[									//定义路由
{ path:'/goods', component:goods },
{ path:'/ratings', component:ratings },
{ path:'/seller', component:seller }
]


const router = new VueRouter({					            //创建router实例，传routes配置
	routes,
	linkActiveClass: 'active'
})


const app = new Vue({							//创建和挂载根实例，通过 router 配置参数注入路由
  router,
  render:h =>h(App)
}).$mount('#app')