前言

这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容。

首先在main.js文件

// 引入vue-routerimport VueRouter from 'vue-router';// 引入组件import goods from './components/goods/goods';import seller from './components/seller/seller';import ratings from './components/ratings/ratings';// 使用路由Vue.use(VueRouter);// 创建路由实例const router = new VueRouter({  routes: [    // path 路径； component组件；
    { path: '/goods', component: goods },
    { path: '/seller', component: seller },
    { path: '/ratings', component: ratings }
  ]
});//最后挂载到vue实例上new Vue({  el: '#app',
  router,  components: { App },  template: '<App/>'});

html代码样式

<div class="tab-item">        <router-link to="/goods">商品</router-link></div><div class="tab-item">        <router-link to="/seller">商家</router-link></div><div class="tab-item">        <router-link to="/ratings">评论</router-link></div>

指定打开页面
为了与 HTML5 History API 保持一致性，router.go 已经被用来作为 后退/前进导航，router.push 用来导向特殊页面。

router.push('/goods');

在创建VueRouter实例时候，可以添加一些配置

作者：阿r阿r
链接：https://www.jianshu.com/p/e9a7eb7afcdd