前言
这篇文章给大家讲解的是在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
