vue.js - vue-router列表详情按钮跳转

问题描述

问 题

列表详情按钮，点击后整个页面跳转至详情页面（顶部logo不变，spa页面），这个该怎么做？

详情按钮代码：

<p class="linkDetail"><router-link :to="'/top250/'+list.id">详情</router-link></p>

vue-router代码：

{
  path: '/top250',
  name: 'top250',
  component: Top250,
  children: [
    {
      path: '/top250/:id',
      component: DetaiMovie
    }
  ]
},

解决方案

vue-router文档

{
  path: '/top250',
  name: 'top250',
  component: Top250
},{
    path: '/DetaiMovie',
    name: 'DetaiMovie',
    component: DetaiMovie
}

<p class="linkDetail"><router-link :to="{ name: 'DetaiMovie', params: { id: 123 }}">详情</router-link></p>

这篇关于vue.js - vue-router列表详情按钮跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！