Vue.js高仿饿了么外卖App实战中，讲师的Vue版本是2.2.1，而最新安装的是2.2.6版本。
创建一个基于 webpack 模板的新项目：
vue init webpack my-project
创建完会看到初始化的目录结构和以往的不同了
以前渲染首页主要涉及的HTML和 js文件有 /index.html 、 /src/main.js 、 /App.vue
而现在多了 /src/router/index.js 和 /src/components/Hello.vue ，因为新增了路由，在index.js中配置好路由，App.vue中直接渲染组件Hello.vue。相当于以前渲染App.vue的页面，现在跳转至渲染Hello.vue页面。
如果想实现组件切换的效果：
App.vue渲染匹配的组件：
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<div class="tab-item"><router-link to="/goods">商品</router-link></div>
<div class="tab-item"><router-link to="/ratings">评论</router-link></div>
<div class="tab-item"><router-link to="/seller">商家</router-link></div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
main.js配置路由：
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 1. 定义组件。
// 可以从其他文件 import 进来
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [{
path: '/',
redirect: '/goods'
}, {
path: '/goods',
component: goods
}, {
path: '/ratings',
component: ratings
}, {
path: '/seller',
component: seller
}];
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes
});
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});
- 而2.2.6版本的Vue 已经配置好了路由，只需嵌套路由
Hello.vue渲染匹配的组件：
<div class="tab-item"><router-link to="/goods">商品</router-link></div>
<div class="tab-item"><router-link to="/ratings">评价</router-link></div>
<div class="tab-item"><router-link to="/seller">商家</router-link></div>
<router-view :seller="seller"></router-view>
index.js配置子路由：
// 1. 定义组件。
import goods from '../components/goods/goods';
import ratings from '../components/ratings/ratings';
import seller from '../components/seller/seller';
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
redirect: '/goods',
// 2. 配置子路由
children: [
{ // 当 /goods 匹配成功，
// goods 会被渲染在 Hello.vue 的 <router-view> 中
path: 'goods',
component: goods
},
{
path: 'ratings',
component: ratings
},
{
path: 'seller',
component: seller
}
]
}
]
});
参考文档：
讲师代码： https://github.com/ustbhuangyi/vue-sell
vue-router： https://router.vuejs.org/zh-cn/
