vue子路由的一个坑

╰半夏微凉° 2023-01-01 13:51 152阅读 0赞

路由信息如下  
下面是错误的路由

export default new VueRouter({ 
        routes: [
            { 
                path: '/',
                children: [
                    { 
                        path: 'login',
                        component: Login
                    }
                ]
            }
        ]
    })

会发现访问路径`http://localhost:8080/`没有显示Login组件

原因是父路由要有组件，上面的父路由少了`component`

### 正确的子路由路由应该补上父路由的component映射 ###

export default new VueRouter({ 
        routes: [
            { 
                path: '/pc',
                component:Index, // 少了它就会导致子路由配置不生效
                children: [
                    { 
                        path: 'login',
                        component: Login
                    }
                ]
            }
        ]
    })

总结一下，子路由的作用就相当于局部组件的替换（需要在父路由组件中完成，因此是需要有父组件的映射，少了父组件就无法完成组件的替换）

##### 也就是在父路由对应的组件中使用 #####

<router-view></router-view>

##### 子路径对应的组件(`component 映射 对应的组件`)就会替代`router-view`标签。 #####

这样路由发生变化，如果匹配到了子路由就会替换组件。

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 爬坑之路 - 路由重定向

vue新手，本文纯属自己摸索出来的，如有错误，请指正，感谢感谢。问题： http://localhost/dist/productInfo/1 跳转 http://l

偏执的太偏执、/ 2023年06月30日 09:15/ 0 赞/ 68 阅读

相关 Vue学习（路由定义、路由传参方式、子路由）-学习笔记

文章目录 Vue学习（路由定义、路由传参方式、子路由）-学习笔记路由定义（见下单个文件）路由传参方式

小鱼儿/ 2023年01月23日 10:57/ 0 赞/ 44 阅读

相关 vue子路由的一个坑

路由信息如下下面是错误的路由 export default new VueRouter({ routes: [ {

╰半夏微凉°/ 2023年01月01日 13:51/ 0 赞/ 153 阅读

相关 Vue中路由嵌套（子路由）

路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。根据我们前面学习的VueRouter的知识，可以直接写出代码来实

野性酷女/ 2022年12月25日 15:56/ 0 赞/ 304 阅读

相关 vue 子路由如何调用父路由中的方法

在开发项目中遇到了这么个问题，因为在父路由界面中有部分是子路由的内容，而问题是子路由的操作完成后需要调用父路由的一个方法来改变父路由中的样式。如果是组件的话，那么就简单很多了，

我就是我/ 2022年12月20日 12:36/ 0 赞/ 302 阅读

相关 vue element container 子路由

在`main`container中添加子模块 1.`index.js` import Vue from 'vue' import VueRouter fro

逃离我推掉我的手/ 2022年10月29日 14:29/ 0 赞/ 36 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 460 阅读

相关 vue-router vue路由中的问题（坑）

[Error in render function: "TypeError: Cannot read property 'matched' of undefined"][Err

傷城~/ 2022年05月30日 05:20/ 0 赞/ 242 阅读

相关 Vue之子路由配置

新建两个组件： about1.vue <template> <div> { {msg}} </

素颜马尾好姑娘i/ 2022年04月18日 04:08/ 0 赞/ 285 阅读

相关 Vue之路由路径path配置的一个坑总结【同级路由path必须唯一】

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

今天药忘吃喽~/ 2021年09月18日 20:28/ 0 赞/ 663 阅读