Vue-Router入门(二) :动态路由及语法匹配

前言

在上一篇文章Vue-Router入门(一) :初识路由中我们对于路由有了初步的一些了解。其中提到了如何创建路由实例,讲解了路由的一些配置,也提到了每个路由会有一个对应的组件。但是一个组件不一定只对应一个路由,如何用一个组件去对应多个路由,本节就来介绍一下动态路由

动态路由是什么

我们写的最多的路由路由比如/about是静态路由,

js 复制代码
{ 
    path: "/about", 
    name: "about", 
    component: () => import("../views/AboutView.vue"), 
},

与之对应的还有动态路由,动态就意味着路由中有可变的部分。这个部分由参数表示,该参数称之为路径参数。

为什么会有动态路由呢?假设我们有一个users页面,该页面的数据根据id会展示不同的数据,我们需要把它放到url上获取,这时候路由的uid是动态的,如果我们用静态路由,每个uid都需要对应一个路由:

js 复制代码
   path: '/users/1'
   path: '/users/2'
   ...

因为路由只能对应一个组件,这么做肯定不现实,于是就有了动态路由,我们把动态部分uid变成一个参数,只要前面路径一样的路由就展示同一个组件,不管这uid有多少个,我们就写一个路由就可以。动态路由的语法为:

makefile 复制代码
路由/:动态参数

上面的edit我们就可以用动态路由:

js 复制代码
   { 
       path: '/users/:id',
       component: User 
   },

注意路径参数前面的冒号一定不能丢,而路径参数我们可以通过params去获取,关于路由传参我们后续会专门讲解。

我们在/users加上路径参数,让它变成动态路由。

js 复制代码
   {
    path: '/users/:id',
    name: 'users',
    component: () => import('@/components/Users.vue')
  }

路径参数可以有多个,都是冒号跟参数名称,并且这些参数都会放到params里面。动态路由对应着同一个组件,为了提交性能,此时组件是复用 ,这也就意味着当路径参数变化时,生命周期不会被调用。

匹配语法

动态路由之所以能够对应同一个组件,也是有具体的匹配语法,提到匹配我们首先想到的肯定就是正则表达式,利用正则表达式让我们匹配到的路由范围更加广阔。比如给uid增加一个类型与长度的判断:

js 复制代码
    path: '/users/:uid(\d{2,4})'

uid必须为数字并且长度为2-4,如果我们打开/users/1不符合匹配条件,页面就是空白。

Sensitive 与 strict 路由配置

默认情况下,所有路由是不区分大小写的,并且能匹配带有或不带有尾部斜线的路由。例如,路由 /users 将匹配 /users/users/、甚至 /Users/。这种行为可以通过 strictsensitive 选项来修改,它们既可以应用在整个全局路由上,又可以应用于当前路由上:

js 复制代码
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 将匹配 /users/posva 而非:
    // - /users/posva/ 当 strict: true
    // - /Users/posva 当 sensitive: true
    { path: '/users/:id', sensitive: true },
    // 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/
    { path: '/users/:id?' },
  ],
  strict: true, 
})
相关推荐
lyj16899720 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景5 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui