vue与swiper结合，如何让页面跳出来

Question

问题描述

我最近在做一个自己的博客，想要利用swiper实现tab卡可以左右滑动切换，但是当我在点击一个内容的区域时，理应跳到相对应的文章详情页面，可是详情页面的组件始终出不来。

问题出现的环境背景及自己尝试过哪些方法

这里我把首页、标签、归档和关于这四个组件封装在swiper这个自定义的组件当中，然后在swiper组件中利用<keep-live>实现组件渲染。但是要实现在点击内容区域时可以实现进入文章详情页，所以我不知道应该把<route-view>放在哪个位置。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

APP.vue下面的代码：

<template>
<div id="app">
<header-bar></header-bar>
<swiper></swiper>
<footer-bar></footer-bar>
</div>
</template>
 

Swiper.vue下面的代码：

<template>
<div class="swiper-box">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item) in list">
        <keep-alive>
          <component :is="item.component"></component>  //动态组件通过:is="模板文件"动态加载不同模板文件
        </keep-alive>
      </div>
    </div>
  </div>
</div>
</template>   

data(){
    return {
      list:[
        {path:'/',name:'index',component:index},
        {path:'/tags',name:'tags',component:tags},
        {path:'/archives',name:'archives',component:archives},
        {path:'/about',name:'about',component:about},
      ]
    }
  },
 

你期待的结果是什么？实际看到的错误信息又是什么？

点击其中的一个，可以实现进入另一个文章详情界面
错误信息是看不到，文章详情页无法渲染