Vue Router配置子路由后父组件不消失，如何实现子路由替换父组件展示

你当前的子路由会渲染在父组件内部，是因为默认嵌套路由的子组件会挂载到父路由组件的<router-view>节点下。要实现同前缀路由切换时直接替换顶级路由容器内容，可通过路由前缀分组的方式实现，既不用重复写路由前缀，也不会出现组件嵌套渲染的问题。

修改后的路由配置（router.js） #

import News from "./components/News";
import Newsitem from "./components/Newsitem";
// 后续新增的新闻相关路由组件直接在此引入即可
import NewsEdit from "./components/NewsEdit";

Vue.use(VueRouter);
const routes = [
    {
        path: '/news',
        // 该层级仅作为路由前缀分组，不声明component
        children: [
            // 匹配/news路径，对应新闻列表页
            {
                path: '',
                name: 'news',
                component: News
            },
            // 匹配/news/:id路径，对应新闻详情页
            {
                path: ':id',
                name: 'newsitem',
                component: Newsitem
            },
            // 匹配/news/:id/edit路径，对应新闻编辑页
            {
                path: ':id/edit',
                name: 'newsEdit',
                component: NewsEdit
            }
        ]
    }
];
export const router = new VueRouter({
    mode: "history",
    routes
})

修改后所有/news前缀的路由组件都会直接渲染到App.vue的顶级<router-view>中，切换路由时会完全替换上一个路由的内容，不会残留父组件News的内容。

如果不想用分组方案，也可以分别定义三个独立路由，不过需要重复写/news前缀，维护性低于分组方案。

内容的提问来源于stack exchange，提问作者Selaminko Elam