服务之家网站推广公司,wordpress 上一页,石家庄做网站最好的公司,西宁建设公司网站一、效果与描述 通过设置路由匹配同时设置重定向#xff0c;让输错的网址重定向到指定页面#xff0c;例如在网页输入网页地址把路径进行任意修改#xff0c;重定向到登录页面。 二、Vue-Router代码
import { createRouter, createWebHashHistory } from vue-routerimport …一、效果与描述 通过设置路由匹配同时设置重定向让输错的网址重定向到指定页面例如在网页输入网页地址把路径进行任意修改重定向到登录页面。 二、Vue-Router代码
import { createRouter, createWebHashHistory } from vue-routerimport Index from ~/pages/index.vue
import NOTFOUND from ~/pages/404.vue
import LOGIN from ~/pages/login.vueconst routes [{path: /,component: Index,
},{path:/login,component:LOGIN
}, {path: /:pathMatch(.*)*,redirect: /login,name: NOTFOUND,component: NOTFOUND
}]const router createRouter({history: createWebHashHistory(),routes
})export default router 三、匹配规则解释 匹配规则代码解释 path: /:pathMatch(.*)* 是一个路由匹配规则它可以用于匹配任意路由下面让我们来详细解释其原理 首先, path: /:pathMatch(.*)* 中的 path 表示该路由的路径斜杠 /意味着它匹配根路径。 其次:pathMatch(.*)* 是一个动态片段它使用了路由参数以冒号: 开头其中 pathMatch 是参数的名称而 (.*)* 是参数的正则表达式的匹配模式。(.*) 是一个正则表达式它匹配任意字符零次或多次。这意味着它可以捕获任何路径片段。 最后星号* 表示捕获的路径片段可重复零次或多次。这就说明我们捕获整个路径。
所以/:pathMatch(.*)* 可以匹配任意路径包括根路径和子路径。 四、重定向 path: /:pathMatch(.*)*,redirect: /login,name: NOTFOUND,component: NOTFOUND
例如 在path: /:pathMatch(.*)*,下面加上重定向 redirect: /login,当我们在网页输入域名正确且路径不对时它就会映射到登录页面。
