标签：item r文件 efault color div 文件中 配置路由 路由 route
首先在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) })
标签：item r文件 efault color div 文件中 配置路由 路由 route
原文地址：https://www.cnblogs.com/qwert1/p/8780417.html
