首先在App.vue中
1.使用router-link组件来导航,通过‘to'属性指定链接,<router-link> 默认会被渲染成一个 `<a>` 标签
<router-link class="tab-item" to="/goods">商品</router-link>
<router-link class="tab-item" to="/ratings">评论</router-link>
<router-link class="tab-item" to="/seller">商家</router-link>
2. 路由出口 ,路由匹配到的组件将渲染在这里
<router-view></router-view>
其次在router文件中的index.js中
1.引入vue和vue-router,并且引入各个组件
import Vue from 'vue'
import Router from 'vue-router'
import Goods from '../components/goods/goods'
import Seller from '../components/seller/seller'
import Ratings from '../components/ratings/ratings'
2.调用Vue.use()
Vue.use(Router)
3.配置路由
export default new Router({
routes: [
{
path: '/',
component: Goods
},
{
path: '/goods',
component: Goods
},
{
path: '/seller',
component: Seller
},
{
path: '/ratings',
component: Ratings
}
]
})
然后在main.js中,引入vue App以及router 启动Vue实例 挂载到#app上,注入路由器,进行渲染
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})