6、vue-router之命名路由和命名视图

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

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

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

① 官方文档的解释:https://router.vuejs.org/zh/guide/essentials/named-routes.html
就是在routers配置路由名称的时候给路由定义不同的名字,这样的好处就是可以在使用router-linkto属性跳转路由的时候传一个对象从而实现与router.push一样的效果:

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

等同于

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

② 好了,具体手上实践看看到底应该怎么做
首先我们还是在router文件夹下index.js 给goods路由命名(其实我们一直都有命名)

img_1e7c5909bfd93ebd59417ebef2842646.png
name属性命名

然后我们再到test.vue页面中,敲:

img_61dd801bd798a4870ede589477270978.png
test.vue

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

img_04c262cec9ee7f3b572112991ec1724b.png
localhost
img_e8d98de9a26dd97b8bf4a4a2eb0d3b4b.png
跳转

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

① 官方文档就说的很好嘛(https://router.vuejs.org/zh/guide/essentials/named-views.html
简单来说就是,给不同的router-view定义不同的名字,通过名字进行对应组件的渲染。

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

img_5e5c25a2bb11e4976afeaeffa68b15fb.png
router.png

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

img_f0ffd30fc511e916f4a6fb85cd3d27bd.png
App.vue

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

img_56a8a6fbd67c798cf3a3cfacee74af9a.png
localhost

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

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

参考学习
https://router.vuejs.org/zh/
https://www.jianshu.com/p/81ed5a90bb10
https://www.jianshu.com/p/f499d9f64958

目录
相关文章
|
1月前
|
JavaScript
如何使用Vue的路由实现组件的懒加载和按需加载?
如何使用Vue的路由实现组件的懒加载和按需加载?
29 1
|
16天前
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
33 0
|
1月前
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
43 0
|
1月前
|
JavaScript
如何使用Vue异步组件技术实现路由懒加载?
如何使用Vue异步组件技术实现路由懒加载?
12 1
vue3中使用router路由实现跳转传参
vue3中使用router路由实现跳转传参
|
12天前
|
JavaScript
Vue 路由切换时页面刷新页面重新渲染
在Vue中,路由切换并不自动重新渲染页面,这可能导致传递参数到子组件时出现问题。使用`this.$route.replace(&#39;地址&#39;)`或`this.$route.push({name:&#39;地址&#39;,params:{key:value}})`进行跳转,但子组件不会响应变化。为解决此问题,需监听`$route`对象的变化,如图所示,通过`watch: {$route}`确保页面更新。
|
20天前
|
JavaScript 数据安全/隐私保护 UED
导航守卫(全局,组件,路由独享)都有什么作用导航守卫在 Vue Router 中扮演着重要的角色,不同类型的导航守卫有着不同的作用:1. **全局导航守卫**: - **作用**:
导航守卫(全局,组件,路由独享)都有什么作用导航守卫在 Vue Router 中扮演着重要的角色,不同类型的导航守卫有着不同的作用:1. **全局导航守卫**: - **作用**:
9 0
|
1月前
|
JavaScript
在vue中,如何实现SPA单页面应用的路由管理?
在vue中,如何实现SPA单页面应用的路由管理?
22 2
|
1月前
|
JavaScript UED
vue路由拦截
vue路由拦截
16 4
|
1月前
|
JavaScript
请提供一个具体的示例代码,展示如何使用Vue异步组件技术实现路由懒加载。
请提供一个具体的示例代码,展示如何使用Vue异步组件技术实现路由懒加载。
14 0