vue嵌套（多级）路由的两个坑

最新推荐文章于 2022-11-24 19:07:35 发布
VIP文章 最新推荐文章于 2022-11-24 19:07:35 发布
阅读量832 收藏 2
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stead_Fast/article/details/119802821
版权

找不到组件的两个坑

1.子级路由path不能加/，否则会找不到组件
2.路由入口要写完整路径，否则会找不到组件

使用children配置项配置子路由规则

export default new VueRouter({
   
    routes:[
        //一级路由规则
        {
   
            path:'/about',
            component:About
        },
最低0.47元/天 解锁文章
慕宁儿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue三层嵌套路由的示例代码
08-27
本篇文章主要介绍了Vue三层嵌套路由的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue-router多级路由基本操作（合理解决多个嵌套的公共页面）
weixin_43575792的博客
03-04 3910
Vue-router多级目录基本操作前言一、操作步骤1.router配置2.router-view使用总结 前言 最近在项目中遇到了一个新需求，虽然通过router一级路由也可以实现最终效果，但会导致代码冗余过多，不利于模块化，由此决定学习并使用Vue-router多级目录 一、操作步骤 1.router配置 首先，我们要在项目中建立router文件夹，并在里面创建好index.js，以博主的需求举例子，项目里有两个一级目录，登录和展示，展示页下有三个小目录 以下就是博主的index.js配置，在一级目
Vue 之 vue-router 路由嵌套不显示问题
热门推荐
White feathe 的博客
03-12 3万+
Vue 之 vue-router 路由嵌套1、路由嵌套，vue2.0 router中嵌套路由不成功我先说下我的需求,例如下图我本来是想打算将中间的模块做一层子路由（test模块），模块代码没错，每次编译都正常好使，但是打开编译后的文件之后，一直都是==只能渲染一级路由，子路由没有效果，==，查了一推资料，帖子说：子路由多写了/, 会默认从根目录开始匹配，我试着也删除掉这些东西，但是后来发现，我的
Vue配置路由和嵌套路由的爬坑
Black____White的博客
12-12 758
首先你要在src目录下新建一个文件夹来放你接下来要建的Vue文件如图： 建立好文件夹和文件夹内的vue文件后，他会自动生成内置的一些代码（这都不重要） 接下来就是要配置路由router,也就是配置index.js文件 配置index.js文件 首先你要引入你的文件 import Privacy from  '@/pages/account/Privacy'   前面是你的文...
vue-入坑--嵌套路由 导致 页面跳转 为空问题（子页面内容不显示）
lzhzlm的博客
06-06 7885
vue-入坑–嵌套路由导致页面跳转为空问题（页面不显示内容） 遇到的问题 使用嵌套子路由切换页面，地址栏有变化，但是子页面内容没有显示（一片空白）。 上代码~~ 嵌套子路由代码 src->router->index.js //... import Detail2 from '@/components/Detail2' import Details from '@/components/Details' //... export default new Router({ // 去掉 http
vue-router 嵌套路由注意点
10-14 290
注意下面几点： 1、 在组件中，我们可以通过 $route.params.id 来获取到user/小明/post 中的小明，这样，我们就可以进行个性化的设置了。 2、以 / 开头的嵌套路径会被当做根路径， 这可以让你充分的使用嵌套组件而无需设置嵌套的路径。 也就是说： 我们在children下，写path: "profile", 就相当于拼接成了 /user/:id/profile ，当然，我们也可以直接写为 path: "/user/:id/profile" ，最终的结果是一样的，但是我个人认为后者
[Vue]嵌套(多级)路由
emmmm.....
10-22 2331
1. 静态页面 2. 组件的拆分 2.1 目录结构 2.2 组件 3. 嵌套路由的配置
Vue模板中一个很隐蔽的坑
fictiony的专栏
11-24 305
Vue组件模板在重新render时有个很隐蔽的坑，严重时可能会导致界面明明没什么变化，但性能却明显下降，你想知道是什么坑么？
vue-router 配置多级路由时的踩坑记录
cscscssjsp的博客
09-27 2709
1.在router.ts内，只有根路径使用 '/' 就可以，二级路由以及三级都写在children下，二级路由可以配置'/'，配置后是也是一个根路由，和'/'是同级的 router/index.ts import Vue from 'vue'; import VueRouter, { RouteConfig } from 'vue-router'; import home from '../views/home' import product from '../views/product' impo
vue动态路由实现多级嵌套面包屑的思路与方法
08-29
在实际项目中我们会碰到多层嵌套的组件组合而成，比如我们常见的面包屑导航，下面这篇文章就来给大家介绍关于vue实现动态路由多级嵌套面包屑的思路与方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴...
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
vue多层嵌套路由实例分析
10-17
主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下
关于element表单重置resetFields()不生效问题
Stead_Fast的博客
09-09 4205
问题描述 使用element对话框Dialog，添加编辑使用一个弹出框时，发现使用表单重置方法resetFields()不生效，也就是点击编辑之后关闭弹框，再点击添加，此时弹出框表单仍然保留编辑项的内容而不是全新的空表单。 弹框的@close='resetForm'关闭事件绑定了重置表单以及表单验证的方法 resetForm(){ //重置表单 this.$refs.form.resetFields(); //重置表单验证 this.$refs.form.cl
关于element导航菜单使用for循环出来，展开一个菜单项，其余也都打开的问题
Stead_Fast的博客
09-10 3122
问题描述 使用element导航菜单时，使用v-for循环出来的每一项，打卡一个菜单项时发现其他项也都打开了，是因为<el-menu>标签是根据index来定位展开还是关闭的，而使用v-for循环使得每一项的index都是一样的，所以才会一个打开都打开 解决办法 只需要在循环时，给每一项添加唯一index就可以了，每一项都有自己的唯一id，所以将id作为index，加空字符串是因为index只接受字符串，而id是数字，拼接空字符串可以使数字转为字符串。 <el-submenu v-for=
关于Vue使用es6模板字符串没反应的问题
Stead_Fast的博客
08-15 1390
错误示范 VScode发get请求的地址及参数使用单引号''包裹时，发现${this.keyWord}没有变颜色，跟字符串一个颜色,也就是没有将this.keyWord识别成变量，当成了一般字符串，发请求时带的参数问题请求不到结果 search(){ this.$axios.get('https://api.github.com/search/users?q=${this.keyWord}').then( res => { console.log(res); }, err =&gt
vue中自定义方法this指向问题
Stead_Fast的博客
08-03 735
自定义方法（普通函数）内部的this指向vue实例（vm）。 不建议用箭头函数，因为箭头函数this本身没有指向，会去外边找，找到的this是window对象，而不是vue实例。
vuex模块化+命名空间（namespaced）
Stead_Fast的博客
08-18 557
目的 让代码更好维护，让多种数据分类更加明确 修改store.js //求和相关配置 const countOptions = { namespaced:true, //开启命名空间 actions:{ addOdd(context,value){ if(context.state.sum % 2){ context.commit('ADD',value) } },
vue3 多级嵌套路由
最新发布
06-13
在 Vue3 中，多级嵌套路由的配置同样很容易完成。你只需要按照嵌套路由的方式，递归地定义子路由即可。 以下是一个简单的示例： ```javascript import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', component: () => import('@/views/Home.vue'), children: [ { path: 'about', component: () => import('@/views/About.vue') }, { path: 'contact', component: () => import('@/views/Contact.vue'), children: [ { path: 'email', component: () => import('@/views/Email.vue') }, { path: 'phone', component: () => import('@/views/Phone.vue') } ] } ] } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 在上面的例子中，我们定义了一个父路由 `/`，它将渲染 `Home.vue` 组件，并包含两个子路由 `/about` 和 `/contact`，后者又包含两个子路由 `/email` 和 `/phone`，它们分别渲染 `Email.vue` 和 `Phone.vue` 组件。 在 App.vue 中，我们同样使用 `<router-view>` 标签来渲染路由： ```html <template> <div id="app"> <router-view /> </div> </template> ``` 这将渲染父路由组件 `Home.vue`，并在其中递归地渲染子路由组件，直到最后一级子路由。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值