Vue-Router之重学

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量82 收藏
点赞数
分类专栏： 前端学习 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/newboygogogo/article/details/130725129
版权
在Vue路由设置中，*通配符用于匹配所有未被其他路由捕获的路径，通常用于创建404页面。同时，可以利用`:pathMatch(.*)*`来捕获并存储匹配的路径到`$route.params.pathMatch`。例如，一个路由配置可以先匹配/user-:afterUser(.*)这样的模式，将后续内容置于`$route.params.afterUser`，然后用*作为兜底规则。
摘要由CSDN通过智能技术生成

可以用通配符*来匹配所有的路由，但是仅当其他路由都不能匹配时才会匹配，和router数组里元素的顺序没有关系

{ path: '*', component: () => import(./components/404.vue) }

也可以捕获匹配的路径

const routes = [
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

这里的匹配的路径会放在params里

newboygogogo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3.0路由
ButOff的博客
03-04 1463
入门 用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子： HTML <script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue-router@4"><
vue学习之router
m0_46977781的博客
07-16 543
router1.前端路由的概念2.实现原理2.1hash2.2history.pushState({},"",'home')2.3history.replaceState({},"",'home')3.实现3.1. 引入路径3.2. 配置路由相关信息3.2.1导入路由3.3使用3.3.1通过Vue.use(插件)，安装插件3.3.2创建路由对象3.3.2.1创建路径与组件的对应关系，即配置映射关系3.3.2.2将router对象传入到vue实例中使用4. 设置默认路径5. 修改跳转模式6. router-
vue3设置路由path:‘*‘报错解决方法
热门推荐
做最有意义的事情，成就最有价值的梦想，展现最真实的自己 . 超越自己，改变世界 .
08-21 1万+
一般我们再设置404页面路由的时候是这样的: { path: "/404", name: "notFound", component: notFound }, { path: "*", // 此处需特别注意置于最底部 redirect: "/404" } 但是如果你使用的是vue3的话,你会遇到这样的一个报错: Catch all routes ("*") must now be defined using a param with a custom regexp. 这个报错翻译过来就是捕获所有路
vue router 默认路由，匹配所有路由到 404 页面
左不言的博客
04-13 6056
vue-router const needLoginRoutes = [ { path: '/', name: 'Home', component: () => import('../views/Home.vue') }, { path: '/home', redirect: '/' } ] const routes = [ { path: '/login', name: 'Login', component:.
开发者工具上正常运行而真机调试时出现“Component is not found in path "components……Error: Component is not found in path...
weixin_30786617的博客
05-03 4103
在开发者工具上编译时可以很“正常”地过（就是效果出来了，而且控制台上也没有报错或警告），但是，一旦进行真机调试时就出现下面的错误 这个错误貌似还挺常见的，特别是有时候自定义组件时疏漏了点东西，常见错误的解决可以看这篇博客， 以下记录一下我自己挖坑给自己跳的骚操作！ 按照上面的错误提示：“Error: Component is not found in path "components/s...
vue 数字变星号 过滤器_Invalid path "*"，vue-router4 移除星号全匹配
weixin_29335033的博客
02-22 1627
vue-router4版本中，移除了path:'*'的匹配，再使用旧版的星号时，控制台就会报错按照官方的文档最后的升级说明，把*号修改下，改成“/:pathMatch(.*)*”。//pathMatchisthenameoftheparam,e.g.,goingto/not/foundyields//{params:{pathMatch:['not','foun...
重走vue之vue-router
qq_40708840的博客
10-29 616
vue-router 概述:vue-router是vue的核心插件，用来提供路由功能。通过路由的改变来动态加载组件，达到开发单页面应用网站的目的。 包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于vue.js过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的CSS class的链接 HTML5历史模式或hash模式，在IE9中自动降级 自定义的滚动条行为 安装 通过使用cdn导入在线资源 <script src="https://cdn.b
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
vue-router.js
12-30
vue路由vue-router.js文件下载
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 572
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue ref和reactive区别
灰海
08-25 3543
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue3插件原理
m0_46281382的博客
08-26 1860
简述vue3中use方法加载第三方插件原理
足球联赛|基于SprinBoot+vue的足球联赛管理系统(源码+数据库+文档)
伟庭的博客
08-27 1059
系统阐述的是使用足球联赛管理系统的设计与实现，对于Java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。开发中使用了ssm框架和MySql数据库技术搭建系统的整体架构。
关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
weixin_47342624的博客
08-27 312
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
vue3中如何拿到element plus中el-tree多选的值？
爱敲代码的卡拉米的博客
08-30 108
首先我们要为el-tree设置show-checkbox（它的作用是：节点是否可被选择），然后为el-tree绑定ref。vue2中我们在标签中绑定过ref后会用this.$refs.xxx来进行获取。vue3中的ref跟vue2中的ref获取方式略有不同。
移动端签名
notagoodwriter的博客
08-23 1114
【代码】移动端签名。
深入理解vue-router：单页应用的路径管理
import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值