写点什么

Vue- 命名路由

作者:张三丰无极
  • 2023-06-09
    北京
  • 本文字数:630 字

    阅读完需:约 2 分钟

命名路由

命名路由其实就给给路由起名字,使用 name 属性完成,它可以帮助我们简化路由的跳转


建议在路由路径过长的时候再使用


下面进行演示

name 属性命名

想要给路由命名,直接使用 name 属性,理论来说这个 name 的值可以随便写,但是一般开发中尽量起的语义化一点,让人一看就知道是哪个路由


但是为了演示问题,这里使用拼音放大问题


简化代码

使用了 name 属性,就可以优化编码了路径了,比如说我这里有一个三级路由,需要进行一级路由/二级路由/三级路由才能实现,这样就很长



这时候,我们直接舍弃 path 属性,使用 name 属性,极大的优化了编码


在 to 中使用 name

但是如果把 to 对象的 path 改为 name 名称,那么就会识别不了路由




这时候需要使用这种写法:


:to="{name:'guanyu'}"
复制代码



虽然可以实现一样的路由跳转,但是,还是推荐使用最开始的写法


to="/about"
复制代码


总结

  1. 作用:可以简化路由的跳转。

  2. 如何使用

  3. 给路由命名:


    1.  简化跳转:    1.  ```        <!--简化前,需要写完整的路径 -->        <router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后,直接通过名字跳转 --> <router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 --> <router-link :to="{ name:'hello', query:{ id:666, title:'你好' } }" >跳转</router-link>
复制代码


用户头像

还未添加个人签名 2022-10-26 加入

还未添加个人简介

评论

发布
暂无评论
Vue-命名路由_6月优质更文活动_张三丰无极_InfoQ写作社区