526互联

vue路由局部刷新-局部页面刷新达到和F5刷新一样的注销

发布时间 2023-12-04 16:53:54作者: 影思密达ing

1.静态路由页面加上这一条

{
    path: "/redirect/:path(.*)",
    component: () => import("@/views/redirect/index.vue")
  },
2.点击事件的vue方法里面用
router.replace({
                path: "/redirect/projects/templates/edit",
                query: {
                    type: "edit",
                    id: data
                }
            });

3.redirect/index.vue页面

<template>
    <div></div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
const { params, query } = route;
const { path } = params;
router.replace({ path: "/" + path, query });
</script>

<style lang="scss" scoped></style>

总结:思路就是路由跳转就会刷新页面，从A跳到空白B，再返回A就可以达到效果