匹配优先级

Question

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

这就是我的vue-router索引文件＆＃34;

中的链接

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

除了网址太长以至于无法放入某些名片外，一切都很有效。我想将网址更改为：

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

然而，应用程序中的每一点动态内容都会加载我们的代理网站模板（AgentSite）。报价，客户，政策......他们不能正确加载。

有没有办法删除＆＃34; / agent＆＃34;从URL而不搞乱我们的其他应用程序？我可以将它缩短为＆＃34; / a /：id，但最终会让它变得更加混乱，而不是它的价值。

谢谢！

编辑：有几个人提到了当代理ID是一个数字时有效的解决方案。这是一个好主意，除了我们已经建立了代理商＆＃34; slugs＆＃34;改为使用。

在代理商网站布局上：

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实际上是一个slu ..

Answer 1

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

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

只有在id仅由数字组成时才匹配。

更新：有些人提到了当代理ID为数字时有效的解决方案。这是一个好主意，除了我们已经建立了代理商＆＃34; slugs＆＃34;改为使用。

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

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

匹配优先级

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

换句话说，声明如下：

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

请参阅 CodeSandbox demo Here 。

处理404页

然后我会在＆＃34; AgentSite＆＃34;上方或下方声明404页面路线在你的例子？ { path: "*", component: PageNotFound }

AgentSite路由会匹配之前未匹配的任何网址，因此您必须处理AgentSite组件内的404。

首先，在AgentSite：
之后声明404路线
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>

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

2 个答案:

匹配优先级

处理404页