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:

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

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

vue-router嵌套子路由实际使用插图(1)

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

vue-router嵌套子路由实际使用插图(2)

我们都知道,用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,启动vue-router进行处理,而浏览器地址栏的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}
 
  ]
})

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » vue-router嵌套子路由实际使用

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活