When the vue list enters the details page, the details page displays the contents of the list page plus the details page.
routing: there is a news details page nested under the news page
{
path: "/news",
name: "news",
component: news,
meta: {
title: ""
},
children: [ //
{
path: "/news/newsDetail",
name: "newsDetail",
component: newsDetail,
meta: {
title: "9"
}
}
]
},
content of the component
< router-link class= "item": to= "{path:"/news/newsDetail"}" vMelody for"(item, index) in news.con": key="index" >
< / router-link >
< router-view > < / router-view >
because I want to highlight the navigation of the news details page, I can now go to the details page and find that the page contains the contents of the list page
your nesting method of routing shows the problem. If you don't want this to happen, you can solve it without nested routing. For routing, you can take a look at the document, which has been clearly written in the document.
A route whose list and details are configured at the same level, at least not a parent and son
routing: news lists and details become siblings
{
path: '/news',
name: 'news',
component: news,
meta: {
title: ''
}
},
{
path: '/news/newsDetail',
name: 'newsDetail',
component: newsDetail,
meta: {
title: ''
}
},
list page:
<router-link class="item" :to="{path:'/news/newsDetail',query:{ tit:item['brand'], date:item['date'], active: anchor.tit1}}" v-for='(item, index) in news.con' :key='index'>
</router-link>
finally, remove the exact attribute from the navigation link, which has not been removed before, so that the navigation of the news details on the page is not highlighted.
finally, thank you very much, ah, thank you for your dedication to give me the motivation to move forward.
(2019.3.5) answer the question of the cold month:
linkActiveClass:'active',
cssactive(.active {background: red},)
https://router.vuejs.org/zh/api/-sharplinkactiveclass()
