在 Vue 重定向路由器中获取 "data"

Question

我想实现的是在访问/self时，首先检查issignedin是否为真，然后获取user.name的值进行重定向。这些变量在 Vue 的 data(){... 部分设置。然而，我无法弄清楚，自从创建 Vue 实例后我如何访问数据在我创建路由后：

const routes = [
//...
  {
    path: "/self",
    redirect: (to) => {
      if (app.issignedin) { 
        return "/@" + user.name;
      } else {
        return "/login";
      }
    },
  },
];
const router = new VueRouter({
  routes,
});

const app = new Vue({
  router: router,
  data() {
    return {
      issignedin: true,
      user: { name: "MoPaMo" },
//...
    };
  },

this 和持有 Vue 的变量名 (app) 和 this.$parent 之类的东西都不起作用...:(

将不胜感激！

Answer 1

Vue Router 3 提供router.app访问安装路由器的应用程序实例，您可以使用它来访问app.issignedin。

你可以这样做：

let router = null

const routes = [
  //...
  {
    path: "/self",
    redirect: (to) => {
      if (router.app.issignedin) { 
        return "/@" + user.name;
      } else {
        return "/login";
      }
    },
  },
];

router = new VueRouter({
  routes,
});

或者，如果您希望将 router 保留为 const，请在 router 声明之后使用常规函数，该函数捕获 router 实例：

const routes = [
  //...
  {
    path: "/self",
    redirect: redirectIfNotSignedIn,
  },
];

const router = new VueRouter({
  routes,
});

function redirectIfNotSignedIn() {
  if (router.app.issignedin) { 
    return "/@" + user.name;
  } else {
    return "/login";
  }
}

在 Vue 重定向路由器中获取 "data"

Get "data" in Vue redirect router

javascript

redirect

vue.js

vue-router