Как обменять полный маршрут? Router-link обменивается только последней частью маршрута - PullRequest
Новая
       0

Как обменять полный маршрут? Router-link обменивается только последней частью маршрута

0 голосов
/ 08 марта 2019

Я новичок в vue и vue router и использую Vue router в режиме истории. Приложение содержит меню, которое динамически загружается 

<router-link 
  tag="li" 
  class="link"
  v-for="item in menu" 
  v-bind:key="item.id" 
  :to="item.slug" 
  :exact="item.slug === '/' ? true : false">{{ item.content }}
</router-link>

Это работает хорошо, пока я остаюсь в родительских маршрутах, таких как http://localhost:8080/posts Как только я прохожу уровень глубже, например, на пост с идентификатором 8 http://localhost:8080/posts/8 с роутером ссылка внутри шаблона 

<router-link 
  tag="h2" 
  class="link" 
  :to="{ name: 'post', params: { id: post.id }}"> 
{{ post.title.rendered }} 
</router-link>

это работает одним способом, но не возвращается к родительскому маршруту, когда я щелкаю по основным навигационным ссылкам. Вместо этого просто добавьте ссылку главного меню в конец маршрута, например, вместо http://localhost:8080/posts 

http://localhost:8080/posts/posts

роутер 

const router = new Router({
  mode: 'history',
  base: '',
  routes: [
      { path: '/', name: 'home', component: HomePage },
      { path: '/posts', name: 'posts', component: PostsPage },
      { path: '/posts/:id', name: 'post', component: SinglePost },      
      { path: '/projects', name: 'projects', component: ProjectsPage },
      { path: '/projects/:id', name: 'project', component: ProjectPage },
      { path: '/:page', name: 'page', component: SinglePage },
      { path: "*", redirect: '/' },
   ],
  // etc..
  });

Полагаю, я совершаю распространенную ошибку, но не могу найти решение. Любая помощь приветствуется.

1 Ответ

0 голосов
/ 08 марта 2019

Вы можете использовать absolute пути.Вместо 

<router-link 
 tag="h2" 
 class="link" 
 :to="{ name: 'post', params: { id: post.id }}"> 
 {{ post.title.rendered }} 
</router-link>

используйте 

<router-link 
 tag="h2" 
 class="link" 
 :to="{ name: '/post', params: { id: post.id }}"> 
  {{ post.title.rendered }} 
</router-link>

Изменение /post против post в атрибуте router-link :to.

Вы можетеи, вероятно, следует использовать вложенные маршруты и компоненты для posts posts/:id, но это немного больше работы, и вам это не нужно в данный момент.Подробнее о вложенных маршрутах здесь .

...