有没有办法使用 Vue-Router 从动态 URL 中删除目录？

Question

我为保险经纪公司构建了一个 vue.js 网络应用程序，其中每个代理都有自己的网站，该网站是从他们的个人资料生成的。

这是链接在我的 vue-router 索引文件中的样子"

{
  path: '/agents/:id',
  name: 'AgentSite',
  component: AgentSite
},

除了网址太长而无法放入某些名片之外，一切都很好。我想把网址改成这样：

{
  path: '/:id',
  name: 'AgentSite',
  component: AgentSite
},

但是，应用程序中的所有其他动态内容都会加载我们的代理网站模板 (AgentSite)。报价单、客户、政策...它们无法正确加载。

有没有办法从 URL 中删除“/agents”而不会弄乱我们应用程序的其余部分？我可以将它缩短为 "/a/:id 但这最终会比它的价值更令人困惑。

谢谢！

编辑：有几个人提到了代理 id 是数字时有效的解决方案。这是一个好主意，只是我们已经构建了代理“slugs”来代替使用。

关于代理网站布局：

created() {
    console.log(this.$route.params.id);
    this.$store.dispatch("getAgentFromSlug", this.$route.params.id);
  }

在商店里：

getAgentFromSlug({commit}, payload){
  const db = firebase.database();
  db.ref("users/").orderByChild("slug").equalTo(payload).once("value", 
(snap) => {
    console.log(snap.val());
    var info = snap.val();
    commit("setAgentSiteInfo", info[Object.keys(info)[0]])
  })
}

所以，我们的路由 ID 真的是个蛞蝓。

Answer 1

考虑到ids 是数字，您可以使用：

{
  path: '/:id(\\d+)',
  name: 'AgentSite',
  component: AgentSite
},

仅当 id 仅由数字组成时才匹配。

更新：一些人提到了代理 ID 为数字时有效的解决方案。这是一个好主意，只是我们已经构建了代理“slugs”来代替使用。

如果名称可能与现有路由冲突，最后声明代理路由。

来自Matching Priority docs（强调我的）：

匹配优先级

有时同一个 URL 可能会被多个路由匹配。在这样一个 case 匹配优先级由路由的顺序决定 定义：路由定义越早，优先级越高 得到。

换句话说，声明如下：

  routes: [
    {
      path: '/',
      component: HomePage
    },
    {
      path: '/quotes',
      component: Quotes
    },
    {
      path: '/clients',
      component: Clients
    },
    {
      path: '/:id',
      component: AgentSite,
      props: true
    }
  ]

见CodeSandbox demo Here。

处理 404 页面

然后我会在您的示例中将 404 页面路由声明在“AgentSite”之上还是之下？ { path: "*", component: PageNotFound }

AgentSite 路由将匹配任何以前不匹配的 URL，因此您必须处理 AgentSite 组件内的 404。

首先，声明404路由在AgentSite:

  routes: [
    // ... (other routes)
    {
      path: "/:id",
      component: AgentSite,
      props: true
    },
    {
      path: ":path",
      name: "404",
      component: p404,
      props: true
    }
  ]

然后，在AgentSite 中，获取代理:id，检查它是否是已知代理，如果不是，则重定向到404 路由按名称（否则会匹配再次代理）。

export default {
  props: ["id"],
  data() {
    return {
      availableAgents: ["scully", "bond", "nikita"]
    };
  },
  created() {
    let isExistingAgent = this.availableAgents.includes(this.id);
    if (!isExistingAgent) {
      this.$router.push({
        name: "404",
        params: { path: this.$route.fullPath.substring(1) }
      });
    }
  }
};

CodeSandbox demo Here 已包含此处理。

Answer 2

如果您的 :id 具有特定格式 (example from vue-router repository)，您可以使用正则表达式匹配。

例如，如果您的:id 是一个数字：

const routes = [
  { path: '/:id(\\d+)', component: Foo },
  { path: '/bar', component: Bar }
]

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/:id(\\d+)', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

.router-link-active {
  color: red;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/321321">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

  <router-view></router-view>
</div>