路由的name属性的作用

2023-5-1 08:31| 发布者: 开心| 查看: 102| 评论: 0

阅读字号:

摘要: 新手用户可能会对路由器设置和使用感到困惑，本文路由的name属性的作用将为您提供适用于不同操作系统和设备的路由器设置指南和技巧。本文内容目录一览：1、Vue-router如何传递参数2、vue组件的name ...

    新手用户可能会对路由器设置和使用感到困惑，本文路由的name属性的作用将为您提供适用于不同操作系统和设备的路由器设置指南和技巧。本文内容目录一览：1、Vue-router如何传递参数2、vue组件的name的作用和路由name的作用3、思科路由器命令：ip name-server和ip domain-name，有何区别？4、router中name属性5、vue-Router中name的使用Vue-router如何传递参数
原文地址：
开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了哪些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你现在所看的页面位置（类似于面包屑导航）。
  一、用name传递参数
   前两节课一直出现name的选项，但是我们都没有讲，这节课我们讲name的一种作用，传递参数。接着上节课的程序继续编写。
两步完成用name传值并显示在模板里：
在路由文件src/router/index.js里配置name属性。
模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：
  二、通过router-link 标签中的to传参
也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用router-link标签中中键的to属性进行传参，需要您注意的是这里的to要进行一个绑定，凳亏写成:to。先来看一下这种传参方法的基本语法：
这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.
了解基本的语法后，我们改造一下我们的src/App.vue里的router-link标签,我们把hi1页面的router-link进行修改。
给在卖粗巧src/router/index.js文件里的hi1配置的路由起个name,就叫hi1.
最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.
  总结：  今天我们学习了两种传参的方法，一般会使用第二种方法。我们通过学习也知道了name的用途，一种作用是传参，一种作用是在传参时起到名称作用。传参的操作在实际开发中是基本的需求，我们一定要掌握好啊。vue组件的name的作用和路由name的作用
1.指定name选项的另外一个好处是便于调试
2.有名字的组件有更友好的警告信息
3.另外当在有vue-devtools,未命名组件将显示吵握AnonymousComponent,这种很没有语义, 通过提供name 选项,可以获得更有语义信息森碰仿的组件树
4.所以给组件起一个名字是非常有必要的,尽量不要让组件的名字重复此纤思科路由器命令：ip name-server和ip domain-name，有何区别？
思科路由器命令：ip name-server和ip domain-name区别为：操作不同、IP地址不同、用途不同。
一、操作不同
1、ip name-server：ip name-server是为路由器添加一中野个DNS地址。
2、ip domain-name：ip domain-name是为路由器设置一个域名。
二、IP地址掘培枝不同
1、ip name-server：ip name-server不影响路判敏由器的IP地址。
2、ip domain-name：ip domain-name会改动路由器的IP地址。
三、用途不同
1、ip name-server：ip name-server在路由器需要解析时会用到。
2、ip domain-name：ip domain-name在设置路由器划分域时会用到。router中name属性
在讲name属性之前我们需要知道以下几点：
1.在单页面应用中，网页具体路径显示由router中的path来决定，path设置是什春基么就显示什么，和name无关；
   2.不同路由下的页面渲染的内容是根据components所对应的组件来进行渲染的，和name无关
   3.name属性就相当于给path起了一个别名，方便使用，但是不一定非要设置name，不设置，默认值是default。
   注意：在我们页面跳转的传参的时候使用params传参，在路由里也一定要使用，来匹配对应参数，不然在刷新页面的时候参数会丢失（或者可以使用query来传参数，刷新不丢失）
router里name属性几种常用用途：
   1.指定页面路由，并传递参数
其实在这里使用 router-link to="/Liantong"
   同样可以实现页面导航跳转，但是这样的话消樱就不能直接传递params参数了。
   2.获取组件的name值,以供页面使用
当针对不同页面渲染不同菜单并显示菜单名的时候，我们可以把菜单拿森丛名赋值给路由name，然后进行相应处理
   3.同个路由，渲染多个视图
   有时候，我们对于一个路由，采用多个视图来渲染，此时就需要视图name值来进行区分。
   不过在路由对象中要把component 改为components对象
⚠️vue中name使用和vue-router中name使用没有直接联系，是两个概念

vue-Router中name的使用
在讲vue-Router中name使用之前我们需要先明白几点哪模州：
  其实name就相当于给你的path取李蔽个别名，方便使用，路由并不是一定要设置name值。（如果不设置name，vue-router默认name值为 default）
  注意：当我们使用params传参时，在路由里一定也要使用  ：  来匹配对应参数，不然在刷新页面的时候参数将会丢失。
常见的几种用途
其实在这里使用
router-link to="/Liantong"
   同样可以实现页面导航跳转，但是这样的话就不能直接传递params参数了。
当针对不同页面渲染不同菜单并显示菜单名的时候，我们可以码裤把菜单名赋值给路由name，然后进行相应处理。
  另外vue中name使用和vue-router中name使用没有直接联系，是两个概念。如有疑问请点击  vue中name使用总结 ,进行查看。
以上就是vue-router中name的使用总结，如有错误，欢迎指正！
搭建一个良好的无线网络环境，不仅可以让你更好地工作和学习，还可以让你畅快地享受数字化生活。希望本文所介绍的内容可以对你有所帮助。

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

		自动登录	找回密码
密码			请使用中文注册

路由的name属性的作用

最新评论

相关分类