vue 路由命名

最新推荐文章于 2024-05-15 17:30:55 发布
最新推荐文章于 2024-05-15 17:30:55 发布
阅读量371 收藏
点赞数
文章标签： Vue Router name属性 路由配置 路径简化 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/119253575
版权

要点：

 

 

直接在配置路由里面加入一个配置项 name 这样可以让部分代码简化

原来外面配置跳转路径的时候,要写全路径

而有了name就不需要写路径直接写name就行

但是如果这边直接写name名,它就会认为这其实是一个path名就会找不到，就会什么都不显示

所以要加冒号并引号里面写成对象进行name的配置

 

 

 总结：

 

 

兜里揣着星星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中命名规范&Vue路由
weixin_63104855的博客
05-03 3485
Vue项目以及文件夹命名规范以及Vue路由
vue-router命名路由-命名视图-重定向-别名
AyayaOVO的博客
07-03 519
1、命名路由 给一个路由命一个唯一的名称，然后跳转调用这个名称即可。 （1）在src/router/index.js中加一个带name的路由，代码如下： { path: 'one', // 子页面1 name: 'one', // 路由名称-命名路由 component: One // 页面组件 } （2）在src/component/Home.vue页面中调用，代码如下： // template跳转调用 <router-link :to="{name: 'one'}"&gt
vue-Router中name的使用
lannieZ的博客
10-14 8005
在讲vue-Router中name使用之前我们需要先明白几点： const routes = [{ path:'/Home', component:HomeCom, name:'HomeName' }] 1、在单页面应用中，网页具体路径显示是由vue-router配置中 path决定的，path设置的是什么就显示什么，和name无关。 2、不同路由路径下页面渲染的内容，是根据component所对应的组件来进行渲染的，和name无关。 其实name就相当于给你的path取个别名，方便使用，路由
vue-router学习
angus.dai的博客
05-06 259
helloworld <div> <div> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-vie...
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
最新发布
山花的博客
05-15 1313
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
Vue的路由params与name（路径命名）、props配置的搭配
weixin_47957908的博客
11-01 1581
功能：通过params传参数，提高路由组件的复用性
vue router （忽略路由名字）
沙鑫741的博客
06-27 614
vue router export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '*', name: 'NotFound', comp...
vue-router中name的使用注意事项
liuhailong2014的博客
06-04 2779
先上一个图 这是在运行网站时浏览器给出的一个警告，但不会影像网站的运行，大体意思就是说：“名为index的路由包含有默认的子路由，如果你想要导航到这个路由的话，它的默认子路由是不会渲染的，建议从这个路由上面移除这个name属性，或者给它的子路由设置name”，对于一个追求完美的coder来说，一个小小的警告也是不能允许的！！！ 下面开始填坑，很简单把这个name放到当前路由的默认子路由上...
讲解vue-router之命名路由和命名视图
08-27
在实际开发中，我们可以在router文件夹下index.js中给路由命名，然后在test.vue页面中使用router-link进行跳转。这样可以实现与普通路由跳转、编程式路由跳转一样的效果。 2. 命名视图 命名视图是指在路由配置时，...
Vue路由demo
08-03
Vue路由（Vue Router）是官方提供的强大路由管理器，它允许我们实现单页面应用（SPA）中的页面导航和状态管理。在Vue项目中，路由扮演着至关重要的角色，它帮助我们定义页面之间的跳转，并处理与这些跳转相关的数据...
解决vue路由name同名,路由重复的问题
10-15
总之，解决Vue路由name同名和路由重复的问题，需要开发者在设计路由配置时遵循命名唯一性的原则，并在遇到路由跳转失败时仔细检查路由配置的正确性。通过不断的实践和调试，可以总结出一套适用于自己项目的路由使用...
详解vue路由
10-15
本文详细介绍了Vue.js框架中的路由管理库vue-...以上就是本文关于Vue路由的详细介绍，涵盖了基本使用到高级特性，通过实例演示了如何在Vue项目中设置和使用路由，帮助开发者理解和掌握vue-router的使用方法和技巧。
Web前端框架应用：第5章 Vue路由-命名路由.pptx
06-06
第5章 Vue路由 初识路由 用户登录注册案例 嵌套路由 命名视图 vue-router 动态路由 命名路由 编程式导航 学习目标 目录 目录 知识架构 5.1 初识路由 知识架构 5.2 vue-router 知识架构 5.3 用户登录注册案例 知识...
vue 组件属性 name的作用
qq_42449028的博客
04-15 599
组件是有name属性的，匹配的就是组件的name。和vue-router中配置的name是不同的含义。 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤 配置标签的exclude或者include属性做组件筛选 实例： 2.DOM做递归组件时 在自身组件调用自身的时候，可以通过定义name的值进行递归调用 实例： {{item.title}} <script> export default { name:'DetailList',//递
vue路由全面详解（中）：路由命名、query参数、params参数、props配置、replace属性、编程式路由导航
m0_54861649的博客
02-21 1744
上篇博客vue路由全面详解（上）：基本使用、多级路由、工作模式……_czjl6886的博客-CSDN博客，我们对路由有了基本的认识与使用，今天我们就来看看路由更深入、更常见的用法。 目录 一、路由命名 二、路由的参数 1.query参数 2.params参数 三、路由的props配置 四、replace属性 五、编程式路由导航? 一、路由命名 1. 概念理解：路由命名，就是给路由映射的路径命一个名字 **2.好处 ：**可以简化路由的跳转 3.使用方法 在route文件夹的index.js文件里面，添加n
vue-router的routes中name属性作用详解
m0_60237095的博客
08-16 6784
我们常用vue.js和vue-router来创建单页应用，vue-router能很方便的管理所有的单页组件。我们在定义每个路由的时候会有一个name的属性（如下面代码），通常我们不定义这个属性发现也没有任何问题，那么这个name到底有什么用呢？ export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Hello', component: Hello ...
Vue中 path和name的区别是什么
m0_61726249的博客
10-29 4813
path 顾名思义跳转路径，从哪里跳转 两处名字要一致
vue 子路由如何激活父路由_vue-router中,父级路由不能有name属性
weixin_42119989的博客
12-24 1183
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路由的命名视图
09-08
Vue 路由的命名视图是指在路由配置中给每个视图取一个名字，以便在组件中进行引用和使用。通过命名视图，我们可以在同一个路由路径下渲染多个组件。 在 Vue 路由中，可以通过在路由配置对象中使用 `components` 属性来定义命名视图。下面是一个简单的例子： ```javascript const routes = [ { path: '/home', components: { default: Home, // 默认视图 sidebar: Sidebar, // 侧边栏视图 header: Header // 头部视图 } } ] ``` 在上述例子中，我们为 `/home` 路径定义了三个命名视图：`default`、`sidebar`、`header`。这些命名视图对应的组件分别是 `Home`、`Sidebar` 和 `Header`。 在组件中使用命名视图时，可以使用 `<router-view>` 标签，并通过 `name` 属性指定要渲染的具体视图。例如： ```html <template> <div> <router-view name="header"></router-view> <router-view></router-view> <!-- 默认视图 --> <router-view name="sidebar"></router-view> </div> </template> ``` 在上述例子中，我们通过 `<router-view>` 标签以及 `name` 属性分别渲染了 `header`、`default` 和 `sidebar` 视图。 通过使用命名视图，我们可以更灵活地控制路由的渲染，使得不同的组件可以独立地占据页面的不同区域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值