vue-router中name的使用注意事项

最新推荐文章于 2024-04-23 08:39:01 发布
原创 最新推荐文章于 2024-04-23 08:39:01 发布 · 2.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue-router #name

本文解决了一个在Vue项目中常见的警告问题：当一个带有默认子路由的路由被导航时，其默认子路由不会被渲染。文章提供了修改建议，即将name属性移至默认子路由上，以消除警告。

先上一个图

 这是在运行网站时浏览器给出的一个警告，但不会影像网站的运行，大体意思就是说：“名为index的路由包含有默认的子路由，如果你想要导航到这个路由的话，它的默认子路由是不会渲染的，建议从这个路由上面移除这个name属性，或者给它的子路由设置name”，对于一个追求完美的coder来说，一个小小的警告也是不能允许的！！！

下面开始填坑，很简单把这个name放到当前路由的默认子路由上面就行了，哈哈哈！！！

Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法
最新发布
共同学习，共同成长
06-24 2785
大家好，我是码喽的自我修养！今天给大家分享【Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法】，超详细讲解！
vue-router学习6：导航守卫
qq_40358970的博客
04-23 1339
导航守卫是 Vue Router 提供的一种机制，用于在路由发生变化时执行一些操作，比如检查用户是否登录、获取数据等。导航守卫分为全局守卫、路由独享的守卫以及组件内的守卫。这些守卫提供了路由变化前、变化中和变化后的钩子函数，你可以在这些钩子函数中执行需要的逻辑。
解决vue路由name同名,路由重复的问题
10-15
主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue router （忽略路由名字）
沙鑫741的博客
06-27 714
vue router export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '*', name: 'NotFound', comp...
命名为“Home”的路由有一个默认的子路由。当导航到这个命名路由(:to=“{name: ‘Home‘“)时，默认的子路由将不会被渲染。从这个路由中删除这个名称，并使用指定链接的默认子路由的名称
qq_42528367的博客
02-24 609
vue-router的解决问题 [vue-router] Named Route ‘Home’ has a default child route. When navigating to this named route (:to="{name: ‘Home’"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route
Vue-Router小结
benlalagang的博客
07-06 237
用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。入门 | Vue Routerhttps://router.vuejs.org/zh/guide/ 或者在脚手架创建项目中选择 Router 安装完成后会在项目src文件夹下 自动新增 router 文件夹router下 index.js: main.js 中 首先在r
vue router name命名规范_【前端vue系列】路由vuerouter使用
weixin_39764212的博客
11-21 404
“vue-router可以满足我们简单的路由功能，同时也满足高级功能需求”本文主要讲解在vue框架中如何使用vue-router组件。先上一张思维导图，对本文的讲解内容有个总体的认识。01—定义Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查...
详解新手使用vue-router传参时注意事项
12-09
本文将详细讲解新手在使用vue-router进行参数传递时需要注意的事项，主要关注两种常见的方式：使用`name`和`params`组合以及使用`path`和`query`组合。 1. **使用`name`和`params`组合传参** 当我们需要通过路由...
Vue-Router总结
Debug的博客
06-03 497
路由三大组成部分 router-link:导航—link 标签 router-view:路由视图–路由页面呈现的地方 new VueRouter():路由配置—routes 路由配置 VueRouter它是什么？ vue-router 是 vue 官方出的一个专门用于 vue 的路由。 使用插件安装 Vue.use(VueRouter) 组成部分 mode:让路由以某种形式呈现，hash 和 history 模式 base:设置一个根路径，用于发布的时候绑定服务端子目录的 routes:设置路由匹
vue 路由命名
MCCLS的博客
07-30 470
要点： 直接在配置路由里面加入一个配置项 name这样可以让部分代码简化 原来外面配置跳转路径的时候,要写全路径 而有了name就不需要写路径直接写name就行 但是如果这边直接写name名,它就会认为这其实是一个path名就会找不到，就会什么都不显示 所以要加冒号并引号里面写成对象进行name的配置 总结： ...
HTML中id、name、class 区别
轻轻草原
10-17 1535
HTML 中 id与name 区别 一个name可以同时对应多个控件，比如checkbox和radio 而id必须是全文档中唯一的 id的用途1） id是HTML元素的Identity，主要是在客户端脚本里用。 2） label与form控件的关联，如 <label for="MyInput">My Input</label> <input id...
vue-router的routes中name属性作用详解
m0_60237095的博客
08-16 7099
我们常用vue.js和vue-router来创建单页应用，vue-router能很方便的管理所有的单页组件。我们在定义每个路由的时候会有一个name的属性（如下面代码），通常我们不定义这个属性发现也没有任何问题，那么这个name到底有什么用呢？ export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Hello', component: Hello ...
vue 子路由如何激活父路由_vue-router中,父级路由不能有name属性
weixin_42119989的博客
12-24 1275
vue项目中,使用了vue-router,我的场景是在一个路由中嵌套了子级路由,然后我在运行项目的时候,给出了警告:[vue-router] Named Route 'Layout' has a default child route. When navigating to this named route (:to="{name: 'Layout'"), the default child ro...
vue项目中: 在外部js文件中获取当前页面的路由名route.name
weixin_50723565的博客
10-14 8719
js文件中如何获取$route.name
vue中的$route和$rounter的相关方法使用
wlijun_0808的博客
05-18 1884
$route中的方法介绍 （1）$route.path 得到的是一个字符串，等于当前路由对象的路径，会被解析成为绝对路径，如’/home/news’ （2）$route.params 得到的是一个对象，包含路由中的动态片段和全匹配片段的键值对 （3）$route.query 得到的是一个对象，包含路由中查询参数的键值对，例如，对于/home/news/detail/01?favorite = yes，如果得到$route.query.favorite == ‘yes’ （4）$route.router 路由
vue父子传值和传方法
qq_43541326的博客
05-07 443
父组件给子组件传值 父组件代码 子组件代码 效果图 传多个值 效果图 父组件给子组件传方法 父组件代码 子组件接收方法代码 效果 更厉害的把整个父组件传给子组件 父组件代码 子组件代码 效果 下面是获取方法 效果 父组件获取子组件值 这是子组件代码 这是父组件代码 效果 使用ref方法 来获取子组件的数据和方法 1：获取子组件的数据 父组件代码 子组件代码 效果...
vue3 route和router的区别以及如何传参数接受参数，如何像vue2一样使用$route和$router详解
大胆刁民的博客
08-23 7440
因为我们在 里面没有访问 ，所以我们不能再直接访问 或 。作为替代，我们使用 和函数,或者 Vue3 中提供了一个 方法来获取当前 Vue 实例 Vue Router 和 组合式 API | Vue Router (vuejs.org)vue3 是用来操作路由的，是用来获取路由信息的。route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ewsroute.params 对象，包含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面route.query 对
vue命名路由（name的使用）
zyy_wx的博客
09-26 1026
vue命名路由（name的使用）
路由vue-route的使用
python全栈
11-14 4182
{访问路由：http://localhost:8080/#/user/666UserView.vue组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值