Vue2.x 自定义重定向路由route组件

参考

1. Vue render 函数介绍

问题描述

1. 用户在后台界面长期不操作的时候，导致token过期，因此需要重新登录
2. 用户重新输入账号和密码，需要重定向到之前的界面中

重定向组件使用说明

1. 配置路由

// 公共路由
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: (resolve) => require(['@/views/redirect'], resolve)
      }
    ]
  }
]

2. 重定向路由组件

<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // 返回一个空的节点，即什么都不显示，避免警告
  }
}
</script>

Vue render 函数介绍

render
类型：(createElement: () => VNode) => VNode

详细：

字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。