Vue.js高仿饿了么外卖App之嵌套路由

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页面。

如果想实现组件切换的效果：

• 看讲师的代码，旧版本的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/