1. Background
The project includes both front-end page display and back-end management system. The two pages need to use router-view to switch components respectively.
Front page component export
Backend page component export
2. Problems
After inserting router-view into the background basic page, click the left link router-link to jump to the blank page.
It should be like this
This is actually the case
3. Solve
Backend top-level routing added 重定向
to prevent parent path loss
Add sub-route jump link
Routing settings neutron routing path 禁添 '/'
, otherwise it will become the root path
< router- link to= "/backend" class = "right" >
< img src= "@/assets/img/profile.jpg" alt= "" >
< span> 私人重地< / span>
< / router- link>
const routes = [
{
path : '/' ,
name : 'MyHome' ,
component : ( ) => import ( '../views/MyHome' ) ,
} ,
{
path : '/article' ,
name : 'MyArticle' ,
component : ( ) => import ( '../views/MyArticle.vue' )
} ,
{
path : '/backend' ,
redirect : '/backend/behome' ,
name : 'MyBackEnd' ,
component : ( ) => import ( '../views/backend/MyBackEnd.vue' ) ,
children : [
{
path : 'behome' ,
name : 'BeHome' ,
component : ( ) => import ( '../views/backend/BeHome.vue' )
} ,
{
path : 'comments' ,
name : 'BeComment' ,
component : ( ) => import ( '../views/backend/BeComment.vue' )
} ,
{
path : 'user' ,
name : 'BeUser' ,
component : ( ) => import ( '../views/backend/BeUser.vue' )
} ,
{
path : 'set' ,
name : 'BeSet' ,
component : ( ) => import ( '../views/backend/BeSet.vue' )
} ,
]
} ,
]
< template>
< el- container>
< ! -- 侧边栏 -- >
< div class = "aside" >
< el- aside width= "200px" >
< div class = "bloger" >
< img src= "@/assets/img/profile.jpg" alt= "" >
< p> 百日梦想家< / p>
< / div>
< el- row class = "tac" >
< el- col : span= "24" >
< el- menu default - active= "2" >
< router- link to= "behome" >
< el- menu- item index= "1" >
< i class = "el-icon-s-home" > < / i>
< span slot= "title" > 主页< / span>
< / el- menu- item>
< / router- link>
< router- link to= "comments" >
< el- submenu index= "2" >
< template slot= "title" >
< i class = "el-icon-document" > < / i>
< span> 文章< / span>
< / template>
< / el- submenu>
< / router- link>
< router- link to= "comments" >
< el- menu- item index= "3" >
< i class = "el-icon-s-comment" > < / i>
< span slot= "title" > 评论< / span>
< / el- menu- item>
< / router- link>
< router- link to= "user" >
< el- menu- item index= "4" >
< i class = "el-icon-user" > < / i>
< span slot= "title" > 用户< / span>
< / el- menu- item>
< / router- link>
< router- link to= "set" >
< el- menu- item index= "5" >
< i class = "el-icon-setting" > < / i>
< span slot= "title" > 设置< / span>
< / el- menu- item>
< / router- link>
< / el- menu>
< / el- col>
< / el- row>
< / el- aside>
< / div>
< el- container>
< el- main>
< div class = "content" >
< router- view/ >
< / div>
< / el- main>
< / el- container>
< el- container>
< template>