欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue自定义重定向路由route组件

程序员文章站 2024-03-05 11:36:54
...

参考

  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)
      }
    ]
  }
]
  1. 重定向路由组件
<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 模板编译渲染函数。