Vue 实现不同的路由共用一个组件component的缓存问题+VUE传参问题

路由缓存的实现逻辑见这个：

Vue keep-alive 缓存路由和刷新路由_vue刷新缓存路由_Teln_小凯的博客-CSDN博客

实现不同的路由共用一个组件component，可直接配置不同的名字指向同一个组件，下面是2个菜单的配置

 然后要实现共用且缓存的话，需要对ruterview加一个key即可实现：:key="$route.fullPath"

<keep-alive :exclude="exclude">
        <router-view v-if="!refreshing" :key="$route.fullPath"></router-view>
      </keep-alive>

 关于默认参数的使用

1、先配置页面参数

 2、动态绑定到mate里面

routerConfig.children.push({
      path: menu.url,
      component: loadComponent(menu.component_path),
      meta: {
        componentName: menu.component_name,
        //外部参数
        params: menu.params,
      }
    });

3、前置路由把值给加到本地缓存

if (to.meta.params != undefined && to.meta.params != "") {
    setUrlQuery(to.path,to.meta.params)
  }

//路由前置守卫
router.beforeEach((to, from, next) => {
  NProgress.start();
  //有登录且没有路由的时候，手动绑定一次路由，解决刷新菜单丢失问题
  if (getAuthorization() != null && store.state.menu.dynRouterLoaded == false) {
    var localMenus = localStorage.getItem(process.env.ADMIN_MENUS_KEY)
    if (localMenus != null) {
      router.initRouter(JSON.parse(localMenus));
    } else {
      router.initRouter([]);
    }
    next({ ...to, replace: true });
  }
  if (to.meta.needLogin == false) {
    //不需要登录
    return next();
  }
  //没有token直接去登录页面
  if (getAuthorization() == null) {
    return next({ path: "/login" });
  }
  const homeUrl = MenuUtil.getHomeUrl();
  //解决回退时进入首页的BUG
  if (to.path == process.env.PATH && homeUrl != "") {
    return next({ path: homeUrl });
  }
  if (to.meta.params != undefined && to.meta.params != "") {
    setUrlQuery(to.path,to.meta.params)
  }
  next();
});

4、页面取值即可

name: "pageIndex",
    data() {
      
      return {
        //第三方网站
        webUrl: getUrlQuery(this.$route.path).url,
      };
    },

实现效果