Два пути с тем же маршрутом и тем же компонентом - 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

Это моё решение.

маршрутизатор:

использование ? отделить param от буквального в маршруте.

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>

Скрипка здесь