vue-cli 2.x项目模板文件说明（四）路由篇

本文为vue/cli2.x脚手架下src目录中的router目录 项目结构参照vue-cli 2.x项目模板文件说明（一）整体结构篇

index.js
(1) 定义页面时采用按需加载式，使用时才加载
(2) meta 定义页面层级，处理移动端返回时使用，比如采用类似书籍翻页效果时，index小的进入index大的页面是翻开一页，反之是翻回一页
(3) 使用history模式，避免地址栏出现‘#’，为防止刷新页面时丢失参数，采用params方式传值，路由写法参考下面主题路由，多个参数传递参照删除路由
(4)路由拦截以及守卫未在本项目中使用

import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import('@/pages/Home').then(m => m.default)   
const Topic= () => import('@/pages/Topic').then(m => m.default)
const Collect= () => import('@/pages/Collect').then(m => m.default)
const DeleteCollect= () => import('@/pages/DeleteCollect').then(m => m.default)

Vue.use(Router)

export default new Router({
  mode: 'history',   
  routes: [
    {
      path: '',
      redirect: '/Home'
    },
    // 首页
    {
      path: '/Home',
      name: 'Home',
      meta: {index: 0},
      component: Home
    },
    // 主题
    {
      path: '/Topic/:type',
      name: 'Topic',
      meta: {index: 2},
      component: Topic
    },
    // 收藏
    {
      path: '/Collect',
      name: 'Collect',
      meta: {index: 1},
      component: Collect
    },
    // 删除
    {
      path: '/DeleteCollect/:id/:name',
      name: 'DeleteCollect',
      meta: {index: 2},
      component: DeleteCollect
    }
  ]
})