前端学习（2411）：name属性的作用

2024-05-19 02:10:46

先纠正一下，这个问题的标题和内容不是一个问题，这里应该是涉及到两个知识点：

组件的 name
路由的 name

下面我分别解释一下。

组件的 name

参考链接：https://router.vuejs.org/zh/guide/essentials/named-routes.html

组件的 name 是组件对象中的一个配置选项，类似于下面这样：

export default {name: 'App',data () {return {}},methods: {},...
}

允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

路由的 name

参考链接：https://router.vuejs.org/zh/guide/essentials/named-routes.html

路由的 name 是路由对象中的一个配置选项，类似于下面这样：

const router = new VueRouter({routes: [{path: 'foo',name: 'foo'component: Foo}]
})

假设我们有一个动态路由：

const router = new VueRouter({routes: [{path: '/user/:userId',component: User}]
})

如果你要使用 JavaScript 跳转到这个动态路由，则你需要这样写：

this.$router.push('/user/' + 用户ID)

如果是在模板中进行路由导航，那就是这样的：

<router-link :to="'/user' + 用户ID">User</router-link>

以上的方式虽然简单粗暴，但是通过拼接字符串得到完整路由路径进行导航不太直观。

所以更好的方式就是给路由配置对象起一个名字，就像下面这样，这个 name 和 path 没有任何关系，它就是一个代号，需要注意的是路由的 name 不能重复。

const router = new VueRouter({routes: [{path: '/user/:userId',name: 'user',component: User}]
})

现在你可以这样处理路由导航：

router.push({ name: 'user', params: { userId: 123 }})

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

所以结论就是：无论是否需要使用路由的 name，都建议给它写上，当你需要的时候就非常有用了，这是一个建议的做法。

前端学习（2411）：name属性的作用相关推荐

自学web前端怎么学？web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
html当中的属性cellspacing,table标签cellspacing属性的作用及使用方法
在html中制作表格,需要用到table标签,而该标签中的cellspacing属性可设置单元格间距,下面我们就一起学习一下cellspacing属性的作用及使用方法. cellspacing属性指定 ...
html中cellpadding属性作用,table标签cellpadding属性的作用及使用方法
在html中制作表格,需要用到table标签,而该标签中的cellpadding属性可设置单元格边距大小,下面我们就一起学习一下cellpadding属性的作用及使用方法. cellpadding属性 ...
从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
HTML 前端学习（4）—— CSS 属性相关
HTML 前端学习(4)-- CSS 属性相关设置长宽块级标签设置长宽行内标签设置长宽代码演示演示结果字体属性字体样式字体大小字体颜色字体粗细代码演示演示结果文字属性对齐方 ...
从零开始前端学习[50]:js操作标签属性,读写属性标签
js操作标签属性标签属性 js下操作标签属性提示: 博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 前端的一些标签属性标签属性:通俗的 ...
浏览器各个属性的作用
作为前端程序员不可避免的会和浏览器打交道,所以要对浏览器的各个属性的作用进行了解,方便开发及调试,这里以谷歌浏览器为例进行简单的介绍.一是巩固对浏览器属性的认识,二是方便大家的学习. 首先打开谷歌浏览 ...
web前端学习之HTML
html标记语言是网页自动化测试所必须要掌握的,可以说是前端学习的基石,我都是在w3school上学的,所以就以此来讲.学习地址:http://www.w3school.com.cn/ HTML 指的 ...
零基础小白前端学习之初始CSS
现在的互联网前端分为三层: HTML:超文本标记语言.从语义的角度描述页面结构 CSS:层叠样式表.从审美的角度负责页面样式 JS:Javascript.从交互的角度描述页面的行为 css它是一个很神 ...

最新文章

热门文章