VueRouter по умолчанию дочерний маршрут без косой черты - PullRequest
Новая
       6

VueRouter по умолчанию дочерний маршрут без косой черты

3 голосов
/ 27 сентября 2019

VueRouter всегда добавляет косую черту перед путем дочернего маршрута.Допустим, у меня есть конфигурация маршрута, подобная этой: 

const routes = [
    path: '/home',
    components: {
        default: HomeBase
    },
    children: [
        {
            path: '',
            component: HomeIndex,
            name: 'home.index'
        },
        {
            path: ':aid',
            component: HomeArticle,
            name: 'home.article'
        }
    ]
]

Я хочу, чтобы маршруты работали так:

  • / home -> загружает HomeIndex
  • / home / 123 -> Загружает HomeArticle с помощью: aid = 123

Но VueRouter всегда заставляет завершающий слеш на пути родительского маршрута при доступе к дочернему маршруту, поэтому маршруты работают следующим образом:

  • / home / -> загружает HomeIndex
  • / home / 123 -> загружает HomeArticle с: aid = 123

Это не работает для меня,так как я работаю с приложением, которое имеет особые требования SEO, которые не требуют конечных слешей.

Обратите внимание, что я использую именованные маршруты для генерации URL-адресов и перемещения между маршрутами, так что пока я могу ссылаться на "/ home"напрямую, я хочу использовать имена маршрутов (" home.index "), поэтому код более СУХОЙ.Я мог бы где-то хранить пути в константах, но недостатком этого является то, что вы не можете использовать реквизит 'params' вместе с реквизитом 'path' при программной навигации.

Я мог бы выделить HomeIndex какотдельный путь, поэтому он не дочерний, но мне нужно, чтобы HomeIndex и HomeArticle были загружены в корневой компонент HomeBase.

Есть идеи, как мне этого добиться?Может быть, через некоторые хуки или плагины VueRouter?

Ответы [ 2 ]

1 голос
/ 27 сентября 2019

Я пробовал следующую структуру, которая работала для меня: 

const routes = [
    path: '/home',
    components: {
        default: HomeBase
    },
    children: [
        {
            path: '/home',
            component: HomeIndex,
            name: "homeindex"
        },
        {
            path: ':aid',
            component: HomeArticle,
            name: "aid"
        }
    ]
]

Вот рабочая скрипка

Использование версий: Vue - 2.5.2, vue-router - 3.0.1,Маршрутизация работает как с использованием name, так и path без добавления завершающего слеша в конце, то есть:

this.$router.push({name: "homeindex"})

this.$router.push("/home")

1 голос
/ 27 сентября 2019

с /* до {name: root} с перенаправлением на /root отображает root.firstchild

Площадка ниже ...

именованные маршруты -> использовать redirect для маршрутизации вашего name: home в name: home.index - пример с переименованием для удобства использования 

const router = new VueRouter({
  routes: [{
    path: '/home',
    name: 'child1', // cheated child
    redirect: '/home', // here point to true child
    component: Home,
    children: [
      {
        path: '', // this is accesible by /home !
        //name: 'child1',
        component: Child1,

      },
      {
        path: ':slug',
        name: 'child2',
        component: Child2,
      }
    ]
  }]
})

Итак, проблема в вашем <router-link>.Скорее всего, к нему добавлен /, поэтому путь будет иметь его.

В основном, если вы направите

из: /a/b в /aэто будет /a

с: /a/ до /a это будет /a/

с: /a до /a/ это будет /a

до: name: root это будет /a без рендеринга первого ребенка

до: name: root.firstChild это будет /a/

На маршрутна /root <=> root.firstChild из любого места по имени вы должны направить на {имя: root}, а затем перенаправить на /root.

с /* на {name: root} перенаправить на /root делает ребенка

детская площадка 

const Home = {
  template: "#home"
}
const Child1 = {
  template: "#child1"
}
const Child2 = {
  template: "#child2"
}

const router = new VueRouter({
  routes: [{
    path: '/home',
    name: 'home',
    redirect: '/home',
    component: Home,
    children: [
      {
        path: '',
        name: 'child1',
        component: Child1,
        
      },
      {
        path: ':slug',
        name: 'child2',
        component: Child2,
      }
    ]
  }]
});


new Vue({
  template: "#index",
  router
}).$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

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

<div id="app">

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

<template id="index">
  <div>
  
    Index
    <router-link :to="{name: 'home'}">Go to /home</router-link>
    <router-link :to="{name: 'child1'}">Go to /home/</router-link>
    <router-link :to="{name: 'child2', params: {slug: 'any'}}">Go to /home/slug</router-link>
    <router-view></router-view>
  </div>
</template>


<template id="home">
  <div>
  
    Home
    
    <router-view></router-view>
  </div>
</template>

<template id="child1">
  <div>{{$route.fullPath}}</div>
</template>
<template id="child2">
  <div>{{$route.fullPath}}</div>
</template>
...