具有相同路由和相同组件的两条路径 - Vue js

Question

我有两个路径具有相同的组件，如下所示：

/:loc("-host") - 应匹配/USA-host

/:loc/:sublocation("-host") - 应匹配/USA/华盛顿主机

如何在 vue 中使用单个命名路由来实现这一点.js

Answer 1

您可以使用路径的别名

const router = new VueRouter({
    routes: [
        { path: '/a', component: A, alias: '/b' }
    ]
})

签入文档

const Home = { template: '<div>Home</div>' }
const Project = { 
    template: '<div>Project {{id}}</div>',
  mounted(){
    console.log(this.$route);
  },
  data: function () {
    return {
        id:this.$route.params.id||'',
    }
  }
}
const router = new VueRouter({
  mode: 'history',
  routes: [
  {
    path: '/',
    component: Home
  },
  {
    path: '/projects/:id?',
    component: Project,
    alias: '/project/:id'
  }
]
})
new Vue({
    router,
  el: '#app'
})

<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">
<router-link to="/">Home</router-link> |
<router-link to="/projects">projects</router-link> |
<router-link to="/project/1">project/1</router-link>
<router-view></router-view>
</div>

还要检查小提琴：https://jsfiddle.net/nikleshraut/9sgk6yg4/1/

注意：默认情况下打开同一组件不起作用，您需要使用其他技巧。对于小提琴上方的测试，请home -> /projects 和 home -> /project/1 将起作用，但/projects -> /project/1 或 /project/1 -> /projects 将不起作用。要使其工作，请执行以下操作： https://jsfiddle.net/nikleshraut/9sgk6yg4/

Answer 2

这是我

的解决方案。

路由器：

使用 ? 将路由中的参数与文本分开。

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/:loc/:subloc?-host', component: Location },
    { path: '/:loc?-host', component: Location },
  ]
})

元件：

从 $route.params 设置局部变量。

const Location = { 
  template: '<div>Location {{loc}} - {{ subloc }}</div>',
  data: function () {
    return {
      loc: this.$route.params.loc,
      subloc: this.$route.params.subloc,
    }
  },
}

模板：

使用 :key="$route.fullPath" 确保组件重新创建每个导航。

<div id="app">
  <router-link to="/">Home</router-link> |
  <router-link to="/usa-host" >loc1</router-link> |
  <router-link to="/usa/washington-host"  >loc2</router-link>
  <router-view :key="$route.fullPath"></router-view>
</div>

在这里摆弄