problem description
I am recently working on a blog of my own. I want to use swiper to switch between left and right tabs, but when I click on an area of content, I should jump to the corresponding article details page, but the components of the details page never come out.
the environmental background of the problems and what methods you have tried
here I encapsulate the home page, tags, archives, and information in the custom component swiper, and then use < keep-live > to render the component in the swiper component. But to make it possible to enter the article details page when clicking on the content area, I don"t know where to put < route-view >.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
the following code for APP.vue:
<template>
<div id="app">
<header-bar></header-bar>
<swiper></swiper>
<footer-bar></footer-bar>
</div>
</template>
the following code for 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},
]
}
},
what result do you expect? What is the error message actually seen?
Click one of them to enter another article details interface
the error message cannot be seen, and the article details page cannot be rendered