前言
这篇文章给大家讲解的是在 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 https://developer.mozilla.org/en-US/docs/web/API/History_API 保持一致性, router.go 已经被用来作为 后退 / 前进导航 https://router.vuejs.org/zh-cn/essentials/navigation.html#routergon ,router.push https://router.vuejs.org/zh-cn/essentials/navigation.html#routerpushlocation 用来导向特殊页面.
router.push('/goods');
在创建 VueRouter 实例时候, 可以添加一些配置
image.png
来源: http://www.jianshu.com/p/e9a7eb7afcdd