vue-router配置

前言

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

首先在main.js文件

// 引入vue-router
import 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实例时候，可以添加一些配置

image.png