Vue中router-view与router-link连用时，链接跳转后不在router-view中显示并且新页面没有router-link内容

Vue2中router-view与router-link连用时，链接跳转不在router-view中显示并且新页面没有router-link内容

1 问题描述：

<div id="app">
    <nav>
      <router-view to="/">index</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
 </div>

使用上述代码实现路由跳转的效果，router-link中指向的新页面会在router-view这个组件中显示，同时

标签中的router-link内容也会一直显示；

想要实现跳转一个全新的页面，新的页面不是显示在中，新页面中也没有nav标签中的内容，而是仅显示新页面有的东西

2 解决办法

首先这种问题出现的原因是一开始没有搞懂router-view与router-link之前的跳转逻辑，router-link跳转的链接会显示在router-view中的前提是跳转的路由是一个路由的子路由，当不是其子路由时，就会跳转全新的页面

注意：要想解决上述问题，首先上述代码不能写在App.vue中，将App.vue中的内容改为：

<div id="app">
    <router-view/>
 </div>

然后新写一个页面，然后写入：

<div id="app">
    <nav>
      <router-view to="/">index</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
 </div>

这样做的目的是，app.vue是所有其他组件的父view/router，router里的父子关系通过来展现

接下来需要做的就是修改router/index.js中的路由配置：

const routes = [
	{
     	path: '/',
     	name: 'index',
        component: () => import('@/views/dashboard/index'),
        children: [
        {
        	path: '/',
            name: 'index',
            component: () => import('@/views/frontPage/index'),
        },{
            path: '/about',
            name: 'About',
            component: () => import('@/views/frontPage/About'),  
        }]
	},
	{
    	path: '/home',
    	name: 'home',
    	component: () => import('@/views/HomeView'),
	},
]

只需要将想完全跳转出去的页面设置在外面，与其平级，就能解决上述问题