vue路由配置（404，路由正则，重复参数）

最新推荐文章于 2024-12-31 10:28:26 发布
最新推荐文章于 2024-12-31 10:28:26 发布
阅读量462 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_52457745/article/details/125452779
版权

vue路由配置

404

  {
  path:'/:path(.*)',
  component:NotFound
}

参数及正则

  • 有参数
  {
  path:'/news/:id',
  component:News
},
  • 有参数并限定参数为数字
  {
  path:'/news/:id(\\d+)',
  component:News
},
  • 至少一个参数
  {
  path:'/news/:id+',
  component:News
},
  • 参数可有可无
  {
  path:'/news/:id*',
  component:News
},
  • 0个或者1个
  {
  path:'/news/:id？',
  component:News
},
Vue - route 路由中配置 404 页面
王二红
07-13 3880
前言 当路由中没有匹配时，会出现页面空白，此时应该写一个 404 页面来代替空白页面。 实现方法 路由是从上往下执行，如果路由表中没有匹配的路由，则会执行 path 为 * 的路由页面。 首先，你需要在 router > index.js 中，加入以下代码： // routes [] { path: '*', name: '404', component: () => import('@/views/404/404.vue') } 然后写一个 404.vue 即可
Vue路由的正则匹配
sayoko06的博客
03-16 6497
正则用法 在JavaScript中正则表达式用法为： /正则表达式特殊字符/修饰符(可选) 特殊字符 这里列一下正则的特殊字符及其用法，加深理解和映象。* \ 将字符变为特殊或非特殊字符。如 n 变为换行符 \n，特殊符号 ( 变为字符 \(。* ^ 匹配字符串起始位置。* $ 匹配字符串结束位置。* * 匹配前面的子表达式零到多次。* + 匹配前面的子表达式一到多次。* ...
vueRoute的路由正则表达式
m0_51312071的博客
05-01 2880
Vue Router中的路由正则表达式与JavaScript的正则表达式语法相同，可以使用常见的正则表达式语法，例如字符类、重复和分组等。注意，在Vue Router中使用正则表达式时，需要将正则表达式包含在圆括号中，并在圆括号之前使用一个冒号来指定参数名称。另外，使用的正则表达式可能会影响路由匹配的性能。这可以匹配可选参数 id，也可以匹配不带参数的路由。这可以匹配一个或多个字母或数字（不区分大小写）。这可以匹配 yyyy-mm-dd 格式的日期。这可以匹配一个或多个字母（不区分大小写）。
Vue Router的路由正则表达式
xiangzhihong8的专栏
07-17 929
注意，在Vue Router中使用正则表达式时，需要将正则表达式包含在圆括号中，并在圆括号之前使用一个冒号来指定参数名称。另外，使用的正则表达式可能会影响路由匹配的性能，因此应该尽量避免使用非常复杂的正则表达式。Vue Router中的路由正则表达式与JavaScript的正则表达式语法相同，可以使用常见的正则表达式语法，例如字符类、重复和分组等。
vue 用正则保护路由参数的合法性
aifan2109的博客
03-26 476
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> ...
【vue路由】
2401_84341509的博客
07-13 737
概念对于单页面应用程序来说，组件和组件之间的跳转规则就是路由特点Vue路由允许我们通过不同的URL访问不同的内容（组件）(1)根据参数的不同，匹配不同的路由<router-link :to{path:'/about/12'}">新闻1</ruter-link><router-link :to{path:'/about/zhangsan'}">新闻2</ruter-link>1.对于转移字符\ ，必须多加一层 \(2) 可重复的参数* 0个或多个+ 1个或多个？0个或1个。
Vue3路由——基本使用、动态路由、路由正则、重复参数、嵌套路由、编程式导航、命名路由、重定向、别名、路由模式与导航守卫
weixin_45732235的博客
11-16 909
Vue3路由
Vue路由：动态路由（参数）
百锦再的博客
12-31 1万+
Vue Router 是 Vue.js 官方的路由管理器，用于在单页应用（SPA）中进行页面的路由跳转与状态管理。它可以帮助你在一个应用中实现不同视图之间的切换，同时保持页面状态，不需要重新加载整个页面。Vue Router 在 Vue.js 应用中充当了一个核心角色，负责将用户的 URL 与应用内部的视图进行映射。路由的定义与跳转动态路由与参数化路由路由守卫与导航控制路由的懒加载与性能优化
vue不通过路由直接获取url中参数的方法示例
12-09
这种方法允许我们在不改变路由配置的情况下，灵活地读取URL中的参数。在实际开发中，这种方法尤其适用于那些需要独立于路由系统的动态数据传递场景。记住，虽然这种方式提供了一定的便利，但在大型应用中，尽可能地...
vue路由缓存的几种实现方式小结
10-15
在 Vue 中，路由缓存可以通过 `keep-alive` 组件来实现，下面我们将详细介绍几种常见的 Vue 路由缓存方法。 1. **全部缓存** 要缓存所有路由，只需将 `keep-alive` 标签包裹住 `router-view`： ```html ...
Vue路由正则表达式的路由匹配
sayoko06的博客
03-16 1万+
可以使用如下正则匹配路由，只有是数字的才会进入这个路由Vue.js官网路由匹配 { path: 'test/:id(\\d+)', component: () =&gt; import ('@/src/Test.vue'), name: 'Test', meta: { title: 'test/' } } ...
【学习记录16】vue3配置404路由
wenhui的博客
12-13 3408
vue3对404配置进行了修改,必须要使用正则匹配 常规参数只匹配 url 片段之间的字符，用/分隔。如果我们想匹配任意路径，我们可以使用自定义的路径参数正则表达式，在路径参数后面的括号中加入 正则表达式 : import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/404', name: 'NoPage404', comp...
Vue 路由配置
ybilss的博客
12-21 202
实用干货: 配置步骤: 1. 先 win+R 输入 cmd 安装在vue目录下: 如cdD:\vue\vue01 cnpm install vue-router --save 或者npm install vue-router --save 2. 在 main.js 引入并 Vue.use(VueRouter) import VueRouter from 'vu...
vue项目使用histore模式打包后 刷新页面404+带参数的路由无法解析
qq_45560350的博客
06-07 260
修改nginx的nginx.conf文件 server { listen 8090; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm;
Vue之路由路径path配置的一个坑总结【同级路由path必须唯一】
热门推荐
weixin_43343144的博客
04-09 1万+
vue路由·配置
weixin_64948861的博客
05-04 4159
在上述代码中，我们首先通过import引入了Vue、Vue Router和两个组件App.vue、Home.vue、About.vue。然后通过Vue.use()语句来安装Vue Router插件，接着我们用VueRouter实例来定义路由规则（路由的配置项），有两个路由/和/about，它们分别对应了两个组件：Home和About，最后通过new Vue()语句创建了Vue实例，并将VueRouter实例挂载在Vue实例上的router属性上。然后定义了两个路由/和/about，它们分别对应了两个组件。
【Vue-Router】使用path: “/:pathMatch(.*)“匹配任意路径及路由重定向
yellowCan777的博客
09-24 3061
表示这是一个动态路径参数。在 Vue Router 中，使用前缀可以定义一个动态的参数。pathMatch是这个路径参数的名字。你可以在路由处理过程中访问这个参数的值当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。// 给出一个路由 { path: '/user-*' }// 给出一个路由 { path: '*' }这里和对应上了这里回顾下params和query的用法命名路由name 搭配 params，刷新页面，参数会丢失。
官方的js路由router
weixin_40945354的博客
02-09 1142
// 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: HelloWorld }, { pa
vue-router 指定向 动态路由 正则 匹配404
qq_36529240的博客
04-29 1194
设置指定向 动态路由 正则 匹配404。index.js 代码。
vue3 添加404路由
最新发布
01-13
### 配置 Vue 3 的 404 页面 为了确保当用户访问不存在的路径时可以展示自定义的 `404` 错误页面，在 Vue Router 中配置通配符路由是一个常见做法。该通配符应当放置于所有其他已定义的具体路径之后，以便只有在没有任何匹配项的情况下才触发此特殊页面。 #### 定义 404 组件与路由规则 创建一个名为 `Router404.vue` 的组件用于表示未找到资源的情况[^2]： ```vue <template> <div class="not-found"> <h1>Oops!</h1> <p>The page you're looking for doesn't exist.</p> </div> </template> <script setup lang="ts"> // 这里可以根据需求导入必要的依赖或声明变量 </script> <style scoped> .not-found { text-align: center; } </style> ``` 接着更新项目的路由配置文件（通常是 `src/router/index.js` 或者类似的命名），添加如下所示的最后一项规则来捕捉任何未能被先前规则所覆盖的请求并指向上述创建好的 `404` 组件: ```javascript import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ // ... 其他具体业务逻辑相关的路由映射 ... // 将这条语句放在所有常规路由后面 { path: '/:pathMatch(.*)*', // 使用正则表达式确保捕获任意URL模式 name: 'NotFound', component: () => import(/* webpackChunkName: "about" */ '../views/Router404.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router ``` 这段代码中的关键在于使用了`:pathMatch(.*?)*`作为路径参数名，这允许它接受任何形式的字符串输入而不会抛出异常；同时通过懒加载的方式引入对应的视图组件以优化应用性能[^1]。 #### 测试配置效果 完成以上更改后重启开发服务器，并尝试导航至应用程序内实际存在的链接之外的地方验证是否成功展示了预期的信息。另外也要记得检查浏览器控制台是否有报错信息影响正常渲染过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值