Как в vueJs сделать два роута с одинаковыми маршрутами?

Рейтинг: 0Ответов: 1Опубликовано: 11.04.2023

Добрый день у меня возникла проблема с роутами vue. Я работаю в laravel и роуты vue подключаю следующим образом: Но мне нужно подключить роут с таким же маршрутом: { path: '/', component: require('./components/All.vue').default }, но другим компонентом.

window.Vue = require('vue').default;
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: require('./components/All.vue').default },
  { path: '/Moscow', component: require('./components/Moscow.vue').default },
  { path: '/SanctPeterburg', component: require('./components/SanctPeterburg.vue').default },
  { path: '/Sklad', component: require('./components/Sklad.vue').default },
  { path: '/Contacts', component: require('./components/Contacts.vue').default },
  { path: '/Requisites', component: require('./components/Requisites.vue').default },
]
const router = new VueRouter({
  routes 
})

const app = new Vue({
    data: {
        
     },
     router
}).$mount('#app');

Постараюсь объяснить. у меня есть панель с кнопками,к которой я подключаю выше указанные роуты.

 <router-link to="/">
        <li class="table__col table__col_start">Все</li>
      </router-link>
      <router-link to="/Moscow">
        <li class="table__col">Москва</li>
      </router-link>
      <router-link to="/SanctPeterburg">
        <li class="table__col">Санкт-Петербург</li>
      </router-link>

, на другой странице есть другая панель с кнопками

 <router-link to="/">
        <li class="table__col table__col_start">Все</li>
      </router-link>
      <router-link to="/Intern">
        <li class="table__col">Интерьеры</li>
      </router-link>
      <router-link to="/Intern2">
        <li class="table__col">Интерьеры</li>
      </router-link>

И на второй панели, я хочу чтобы этот путь подключал другой компонент.Сейчас он будет подключать /components/All.vue Все

Подскажите,пожалуйста, как быть в такой ситуации. Буду рад любой помощи!

vue.js
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Можно просто в компонентах где у вас находятся эти навигационные панели удалять текущий роут и добавлять его уже с новыми настройками в хуке mounted или created например:

добавить свойство name в routes что бы можно было удобно к нему обратится:

const routes = [
  { path: '/',name:'home', component: require('./components/All.vue').default }, 
...
]

// компенент с первой панелью 
<templete>

     <router-link to="/">
       <li class="table__col table__col_start">Все</li>
     </router-link>
     <router-link to="/Moscow">
       <li class="table__col">Москва</li>
     </router-link>
     <router-link to="/SanctPeterburg">
       <li class="table__col">Санкт-Петербург</li>
     </router-link> 
......
</templete>
<script>
import All from './components/All.vue' 
export default{
....
   created(){
       this.$router.removeRoute('home')
       this.$router.addRoute({ path: '/', name:'home', component: All })
   },
}
</script>

В компоненте где у нас другая панель делаем тоже самое, просто меняем компонент в добавляемом роуте

      <router-link to="/">
        <li class="table__col table__col_start">Все</li>
      </router-link>
      <router-link to="/Intern">
        <li class="table__col">Интерьеры</li>
      </router-link>
      <router-link to="/Intern2">
        <li class="table__col">Интерьеры</li>
      </router-link>  
......
</templete>
<script>
import All from './components/MyComponent.vue' 
export default{
....
    created(){
        this.$router.removeRoute('home')
        this.$router.addRoute({ path: '/', name:'home', component: MyComponent })
    },
}
</script>

На самом деле я бы скорее сделал бы один компонент и менял бы его контент через условия с помощью v-if, но если вам так удобнее, то можете делать так. По работе с роутером можете почитать на сайте документации https://router.vuejs.org/guide/advanced/dynamic-routing.html