讲解vue-router之命名路由和命名视图

站长资源 2024/11/26 佚名

2 0 1

前言：前面我们把动态路由、嵌套路由等讲完了，说道完命名路由和命名视图，vue-router的基本使用方法就算是完篇了，还想仔细探究的同学可以去官网翻阅，加深理解。

1.首先来说说什么是命名路由？

① 官方文档的解释：https://router.vuejs.org/zh/guide/essentials/named-routes.html

就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果：

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

等同于

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

② 好了，具体手上实践看看到底应该怎么做

首先我们还是在router文件夹下 》 index.js 给goods路由命名（其实我们一直都有命名）

name属性命名

然后我们再到test.vue页面中，敲：

test.vue

这时候我们去浏览器中点击，就发现用另一种方式实现了和普通路由跳转、编程式路由跳转一样的效果：

localhost

跳转

2.再来说说什么是命名视图

① 官方文档就说的很好嘛（https://router.vuejs.org/zh/guide/essentials/named-views.html）

简单来说就是，给不同的router-view定义不同的名字，通过名字进行对应组件的渲染。

② ok，现在我们进入路由页面，把先前写的全部删掉，以根路由来实践一下什么叫命名视图。我们在根路由下定义了三个组件

router.png

③ 然后我们进入根路由'/'所在的页面，也就是app.vue，我们第一个router-view不命名就使用默认的，其它两个router-view添加name属性命名

App.vue

④ 最后我们就可以看到效果

localhost

3.ok，到目前为止vue-router就基本说完，还想仔细探究的同学可以去官网翻阅，加深理解；明天开始我们就开始首页的制作了，说下组件的运用并把头部、导航什么的封装。

ps：今天周一，早上有点犯困，感觉这章写的不是很通俗易懂，没办法没办法，哪里错了欢迎留言指出来一下；然后就是这章内容其实我个人觉得有点鸡肋，食之无味弃之可惜，一般在项目中还是用前两章编程式路由、动态路由什么的比较多，但是既然vue提供了这种操作肯定有它的道理，所以还是说一下。困了困了。。。

参考学习
https://router.vuejs.org/zh/
https://www.jb51.net/article/141023.htm
https://www.jb51.net/article/141020.htm

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue-router,命名路由,vue-router,命名视图

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“讲解vue-router之命名路由和命名视图”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

讲解vue-router之命名路由和命名视图

Vue 组件传值几种常用方法【总结】

微信小程序实现图片上传功能

评论“讲解vue-router之命名路由和命名视图”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接