1.模版中指定路径
<template>
<div id="app">
<v-header></v-header>
<div class="tab">
<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>
- 定义组件模版
<template>
<div>我是商品</div>
</template>
<script type="text/ecmascript-6">
export default {}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
3.定义路由,加载模版
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import goods from '@/components/goods/goods.vue'
import ratings from '@/components/ratings/ratings.vue'
import seller from '@/components/seller/seller.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/goods',
name: 'goods',
component: goods
},
{
path: '/ratings',
name: 'ratings',
component: ratings
},
{
path: '/seller',
name: 'seller',
component: seller
}
]
})
和之前版本的vue-router不太一样, 使用时加以注意。
附录:
全局添加国内镜像
npm config set registry https://registry.npm.taobao.org
网友评论