Question

我是vue和vue路由器的新手，并且在历史记录模式下使用Vue路由器。该应用程序包含一个动态加载的菜单

<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之类的父路线中，它就会运作良好，到ID为http://localhost:8080/posts/8的ID为8的帖子，并在模板内使用routerlink

<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..
  });

我想我犯了一个常见错误，但是我找不到解决方案。任何帮助表示赞赏。

Answer 1

您可以使用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的{{1}}属性中，变化是post与router-link。

您可能并且可能应该为:to posts使用嵌套的路由和组件，但这需要更多的工作，您现在还不需要。有关嵌套路由here的更多信息。

如何展开完整路线？路由器链接仅交换路由的最后一部分

1 个答案: