vue-router配置

Posted 2020-10-30 坚持最难，但成果也最大

首先在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)
  })