Record your own understanding of nested routing.
My blog needs to have the same head and foot and sidebars. Click the corresponding tab to switch the content in the middle of the webpage. One way is to write multiple pages, each including the sidebar of the header and the end of the page Wait for the content, but this is obviously not a good way to deal with it, so nested routing is used.
First, routing needs to display content <router-view>. There will be a top-level view in app.vue, which is used to display the unchanged part of the page, and then add another place where you want to display the switchable content on the home page <router-view>. Part of my code is as follows :
//home页
<div class="home">
<div class="contain">
<div class="head">
</div>
<div class="container">
<div class="aside">
</div>
<div class="main">
<router-view/>
</div>
</div>
<div class="foot">
</div>
</div>
</div>
Next, go to configure vue-router, first create your own component page, and then import it into the route, set children
export default new Router({
routes: [{
path: '/',
redirect: 'home'
}, {
path: '/home',
redirect: '/home/articleList',
name: 'home',
component: Home,
children: [{
path: '/home/articleList', component: () => import('@/views/ArticleList')
}, {
path: "/home/articleEdit", component: () => import('@/views/ArticleEdit')
},]
}]
})
By the way, redirect redirection, it allows you to directly change the URL to the redirected address after entering the project, I enter the'/' path and directly enter the home page, and then home redirects to his sub-route, so that it is achieved The effect I want.