当前位置:首页 > 技术文章 > 正文内容

轻松掌握VUE路由vue-router知识点

zonemu7小时前技术文章1

1、安装

2、创建路由模块

3、导入并挂载路由模块

简写说明:

router:router 同名可简写 router

4、声明路由连接和占位符

链接也可以使用router提供的标签

5、配置路由连接与组件的对应关系

6、重定向链接跳转

7、嵌套路由

默认子路由

8、动态路由

概念:

1、通过route获取参数

2、通过props获取参数

9、声明式导航/编程式导航

之前介绍的都属于声明式导航,以下介绍编程式导航

例子:

历史记录:就是可以通过浏览器的前进后退,访问历史的页面,也可以通过go方法编程实现前进后退。

注意:

10、路由设置访问权限(导航守卫)

1、全局前置守卫

  • next的三种调用方式

例子:控制main页面的访问权限

对于多个页面拦截可以增加个数组

或者定义个文件

还有其他守卫,可参考官网

相关文章

宽带客户收费管理系统--维修版(宽带售后服务)

宽带客户收费管理系统--维修版headerfooter《宽带客户收费管理系统——维修版》是一款适合宽带运营商使用的管理系统。软件主要包括以下功能:1.主要功能包括用户开户、收费录入、工单登记、故障处理...

2020年最漂亮的7个Linux发行版(最受欢迎的linux发行版)

请关注本头条号,每天坚持更新原创干货技术文章。如需学习视频,请在微信搜索公众号“智传网优”直接开始自助视频学习1. 前言对于想学习Linux的朋友们,心中一定有疑问,哪个Linux版本比较好入门,Li...

2024年10 大 Linux 桌面发行版推荐

年已过半,现在是探究 2024 年最流行的 Linux 发行版的最佳时机。Linux 是一个开源操作系统,构建在 Linux 内核上,并集成了 GNU shell 实用程序、桌面环境、应用程序、包管理...

「图解」父子组件通过 props 进行数据交互的方法

1.组件化开发,经常有这样的一个场景,就是父组件通过 Ajax 获取数据,传递给子组件,如何通过 props 进行数据交互来实现,便是本图解的重点。2.代码的结构3.具体代码 ①在父组件 data 中...

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从...

Vue3 中,父子组件如何传递参数?(vue父子组件传递数据方法)

在 Vue3 中,组件化开发是非常重要的特征,那么组件之间传值就是开发中常见的需求了。组件之间的传值三种方式:父传子、子传父、非父子组件传值。一、父传子( defineProps )父组件主要通过使用...