Vue自定义重定向路由route组件
程序员文章站
2024-03-05 11:36:54
...
参考
问题描述
- 用户在后台界面长期不操作的时候,导致token过期,因此需要重新登录
- 用户重新输入账号和密码,需要重定向到之前的界面中
重定向组件使用说明
- 配置路由
// 公共路由
export const constantRoutes = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: (resolve) => require(['@/views/redirect'], resolve)
}
]
}
]
- 重定向路由组件
<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 模板编译渲染函数。