vue-router嵌套子路由实际使用

前端路由的定义

在spa流行之前，前端路由是没有的；而像java之类的后台语言很早就有了，后端路由一般就是定义一系列的访问地址规则，路由引擎根据这些规则匹配并找到对应的处理页面，然后将请求转发给页面进行处理。
在spa应用中，前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种做法，一是在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航；二是使用HTML5的window.history功能，使用URL的Hash来模拟一个完整的URL。将单页程序分割为各自功能合理的组件或者页面，路由起到了一个非常重要的作用。它就是连接单页程序中各页面之间的链条。

路由与导航

单页式应用是没有“页”的概念的，更准确地说，Vue.js是没有页面这个概念地，Vue.js地容器就只有组件。但我们用vue-router配合组件又会形成各种的“页面”，那么我们可以这样来约定和理解：
1.页面是一个抽象的逻辑概念，用于划分功能场景
2.组件是页面在Vue的具体实现方式

router-view

渲染路径匹配到的视图组件，它还可以内嵌自己的router-view
这里我主要记录下在实际项目中，如何使用命名路由和嵌套命名视图实现布局。下图是我们需要实现的效果（这个效果标记A）index.vue：

很简单吧，我相信每个人都可以设计出这样布局的路由配置；不过，我这里有2个需求：
1.我希望main + aside这整块区域可以跳转路由；什么意思呢，就是从A可以跳转到B(也就是下面这张图)container.vue：

2.我希望main和aside两块是独立的；也就是说，main里可以跳转到其他路由，aside也可以跳转到其他路由；(当然也可以只跳转一个区域的路由，另一个路由不变)也就是从A直接跳转到C（看下图）article-detail.vue：

我们都知道，用vue-cli做项目，都会有一个顶层路由入口router-view写在app.js里面；很显然我们这里的header,main,aside,footer都在这个顶层入口里；我们先来实现一下需求1，需求1很简单，就是在顶层入口里加一个子路由；但是考虑到需求二的原因，index.vue里面需要提前加入两个命名视图来渲染首页，以便于需求二独立渲染main和aside这两个部分：
router.js

import Vue from 'vue'  
import Router from 'vue-router'  
Vue.use(Router)  
let router = new Router({
  path: '/',
  name: 'index',
  component: () => import ('@/views/index.vue')
  children: [
    {
      path: '',
      components: {
        main: () => import('@/views/main.vue'),
        aside: () => import('@/views/aside.vue')
      }
    },
    {
      path: 'container',
      component: () => import ('@/views/container.vue')
    }
  ]
})

index.vue

<template>
  <myheader></myheader>
  <router-view></router-view>
  <router-view name="main"></router-view>
  <router-view name="aside"></router-view>
  <myfooter></myfooter>
</template>

实现需求二就和根路由设置一样了，在路由里使用两个组件来渲染即可：

import Vue from 'vue'  
import Router from 'vue-router'  
Vue.use(Router)  
let router = new Router({
  path: '/',
  name: 'index',
  component: () => import ('@/views/index.vue'),
  children: [
    {
      path: '',
      components: {
        main: () => import('@/views/main.vue'),
        aside: () => import('@/views/aside.vue')
      }
    },
    {
      path: 'container',
      component: () => import ('@/views/container.vue')
    },
    {
      path: 'article-detail',
      components: {
        main: () => import('@/views/article-detail.vue'),
        aside: () => import('@/views/aside.vue')
      }
    }
  ]
})

除了上面这种做法，我再贴一个实现相同功能的代码块：

路由配置：

let router = new Router({
mode: 'history',
scrollBehavior: () => ({y: 0}),
routes: [
  {
    path: '/',
    name: 'home',
    redirect: '/home',
    component: () => import('@/views/home.vue'),
    children: [
      {
        path: 'home',
        component: () => import('@/views/mainAndAside.vue'),
        children: [
          {
            // 这里的path为空，当父组件匹配不到路由时，默认就会渲染这个子路由
            path: '',
            meta: {
              title: '首页'
            },
            components: {
              main: () => import('@/views/main.vue'),
              aside: () => import('@/views/aside.vue')
            }
          }
        ]
      },
      {
        path: 'container',
        component: () => import('@/views/container.vue'),
      },
      {
        path: 'article/detail/:id',
        component: () => import('@/views/mainAndAside.vue'),
        props: true,
        children: [{
          path: '',
          meta: {
            title: '详情页'
          },
          components: {
            main: () => import('@/views/articleMain.vue'),
            aside: () => import('@/views/articleAside.vue')
          },
          props: {
            main: true,
            aside: false
          }
        }]
      },
    ]

再看一看两个核心组件的代码：

home.vue

<template>
  <home-layer>
      <el-col slot="header">
        <myheader></myheader>
      </el-col>
      <router-view slot="main"></router-view>
      <div slot="footer">
        <myfooter></myfooter>
      </div>
      <go-top></go-top>
  </home-layer>
</template>
.......

mainAndAside.vue（这里用了element-ui）

<template>
  <el-row class="main-wrap" :gutter="20">
    <el-col class="aside" ref="aside" :md="8"  :xl="6" :sm="24">
      <div ref="asideWrap" class="aside-wrap">
        <router-view name = "aside"></router-view>
      </div>
    </el-col>
    <el-col class="main" :md="16"  :xl="18" :sm="24">
      <router-view name = "main" :key="key"></router-view>
    </el-col>
  </el-row>
</template>

其他无关紧要的组件，就不展示了。上面这种做法，更加灵活的控制了布局，而不是将三个router-view并列排在一起，而是以一个未命名的router-view作为总入口，然后在这个组件里再设置两个命名视图；这样就可以只渲染总入口的router-view,也可以同时渲染总入口的router-view和子组件的两个命名视图；完全看路由的配置了，很灵活。

全局路由钩子之beforeEach和afterEach

简单看一下，实际应用中的代码：

let loadingInstance = null
// 路由全局前置守卫
router.beforeEach((to, from, next) => {
  loadingInstance = Loading.service({lock: true})
  let token = getCookie('token')
  // 修改网页标题
  window.document.title = to.meta.title
  // token存在的情况（代表用户登录成功过）
  if (token) {
    if (!String(store.getters.token)) {
      store.commit('setToken', token)
    }
    if (String(store.getters.nickname) === '') {
      // 当vuex中没有用户数据时，从后台获取
      store.dispatch('getInfo')
    }
    forbidRedirect(to, next)
  } else {
    // 如果token不存在；判断路由是否需要登录权限
    if (to.meta.requireAuth) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  }
})
 
// 路由全局后置守卫
router.afterEach((to, from) => {
  loadingInstance.close()
})

在beforeEach中根据token判断用户是否登录，如果登录了，则查看vuex中有木有用户信息，没有则在vuex中执行getInfo的action获取用户信息；如果未登录，则判断将要跳转的目标路由，是否需要登录才能跳转；如果是，则使用next()导航到登录页，否则，正常跳转；另外，在beforeEach里，加载一个loading动画，在afterEach中关闭这个loading动画。

history模式

当我们把路由配置成history模式后，假如用户点击/index上的http://localhost/index)。如果我们直接在浏览器输入http://localhost/index，你会惊奇的发现浏览器会出现404的错误！
这是由于直接在浏览器中输入http://localhost/home,浏览器就会直接将这个地址请求发送至服务器，先由服务器处理路由，而客户端路由的启动条件是要访问/index.html,这样的话客户端路由就完全失效了！
解决的办法是将所有发送到服务器的请求利用服务端的URLRewrite模板重新转发给/index.html，启动VueRouter进行处理，而浏览器地址栏的URL保持不变。
这个问题在开发环境下是不会出现的，因为我们在开发环境中使用的是webpack的DevServer，DevServer是对这个问题进行了处理的，只要打开vue-cli(2.X版本)生成的项目中buid目录下的webpack.dev.config.js找到devServer配置属性就可以见到：

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
    ]
  }
}

而当我们部署到生产环境时，就需要在web服务器上进行一些简单配置以支持Fallback。
我只用到过nginx服务器，就以这个为例吧：

location / {
  try_files $uri $uri/ /index.html;
}

一旦我们进行了上述配置，你的服务器就不会再返回404错误页面，因为对于所有路径都会返回index.html文件。为了避免发生这种情况，应该在Vue应用里面覆盖所有的路由情况，然后再给出一个404页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
     .....,
     .....,
     .....,
     // 这个路由应该放在最后面，否则会覆盖其他已有的路由
     { path: '*', component: 404.vue}
 
  ]
})