Vue——vue-router

最新推荐文章于 2024-06-15 14:41:39 发布
最新推荐文章于 2024-06-15 14:41:39 发布
阅读量159 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sakura_0413/article/details/132169233
版权

vue-router

相关理解

路由就是一组key-value的映射关系
路由器切换是销毁！！
npm i vue-router：注意版本，vue2需要安装vue-router@3.
在这里插入图片描述
在这里插入图片描述

基本路由

router-link 最终会转换成a标签。所以使用a标签的地方可以使用router-link路由。但如果不是a标签，如button按钮等，就需要借助编程式路由导航

路由基本使用

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

嵌套（多级）路由

在这里插入图片描述

路由传参

路由传参（query参数）

是通过query方式传递参数的
在这里插入图片描述

路由命名

该方法最好用在多级路由中/query对象的写法中在这里插入图片描述
在这里插入图片描述

路由传参（params参数）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

路由的props配置

在这里插入图片描述

replace属性

在这里插入图片描述

编程式路由导航

在这里插入图片描述

缓存路由组件

切换路由组件后，之前的路由组件是被销毁了！！如果重新切换回来，该组件是被重新挂载进去的，如果有一个input框之前被填写了内容，重写切换回来是不会有内容的。

在这里插入图片描述
在这里插入图片描述
缓存多个：include=[“Message”,“news”]

两个新的生命周期钩子

在这里插入图片描述

路由守卫

作用：对路由进行权限控制

全局守卫

全局前置守卫：在切换路由之前，进行某种信息的校验。如果信息校验错误，则不允许切换到该组件。
全局后置守卫：当已经切换到此组件时，进行的一些设置，如网页的标题等。

路由元信息：可存放如：切换到该组件时的网页标题title、该组件是否需要权限isAtuh等
在这里插入图片描述
在这里插入图片描述

独享路由守卫

可配合全局后置路由守卫一起使用
在这里插入图片描述

组件内守卫

在这里插入图片描述

路由器两种工作模式

在这里插入图片描述
npm run build打包
后生成了dist文件夹
在这里插入图片描述
在这里插入图片描述

Sakura_0413
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue系列 —— vue-route详细使用方法
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
Vue路由——vue-router
m0_54852350的博客
03-06 222
目录 前端路由与后端路由 路由 后端路由 前端路由 vue-router 路由 vue-router基本用法 前端路由与后端路由 路由 路由（routing）：指从源到目的地时，决定端到端路径的决策过程。 路由分为两大类：前端路由和后端路由。 后端路由 后端路由是指：请求方式，请求地址与function处理函数之间的对应关系。 例如在node.jszhong ,express路由的基本用法如下： const express=require('express'); const ro
VUE3 ——安装vue-router
CSSAJBQ_的博客
03-23 967
vite构建项目 cmd 当前文件 命令行输入 npm init vite@latest 然后按照提示操作即可！ 安装vue-router 安装 vue-router @next 表示最新 npm i vue-router@next -S //src > views > login >login.vue 新建login.vue 页面 //vue-router // src > router > index.ts 文件 import { createRouter,
Vue-router
nerao的博客
06-11 211
Router SPA （ single page App ） 单页面应用 多页面应用 有多个html文件，通过a标签的连接联通各个页面 缺点 开发起来太冗余，编译、压缩很耗时间 页面之间的跳转速度太慢 单页面应用 不需要刷新页面，因为它就是一个页面 这个页面内容在切换 单页面内容之间的切换要想实现我们就是用路由了 如今我们的app主要的开发形式就是spa vue路由功能 ...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-router-view-transition:使用scrollBehavior正确地进行超时转换
03-10
vue-router-view-transition 与scrollBehavior兼容的路由器视图的过渡包装器 安装 npm install vue-router-view-transition # or yarn add vue-router-view-transition 用法 该库导出一个组件和一个函数。 您需要...
vue-router.js
12-30
vue路由vue-router.js文件下载
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 380
在vue.config.js中配置关闭Uncaught runtime errors显示。
关于element-plus中el-select自定义标签及样式的问题
x_XDGS的博客
06-14 258
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 208
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 151
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 336
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue初使用实例之笔记本
m0_72168336的博客
06-11 789
vue初使用实例之笔记本
Vue3+Vite报错：vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?
weixin_47121832的博客
06-09 313
Vue3+Vite报错：vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?
vue基础P7-17
weixin_43883584的博客
06-09 586
{{xxxx}}用在标签体中，也就是<>{{xxx}}</>xxx是js表达式，有返回值，如num+1、Date.now()。不是js代码。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1258
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
vue2的vue-router
07-27
2. 创建路由实例：在Vue应用程序的入口文件中，创建一个新的VueRouter实例，并配置路由规则。 3. 定义路由组件：创建需要被路由管理的组件，并分配对应的路由路径。 4. 注册路由实例：将创建的路由实例注册到Vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值