- A+
所属分类：Web前端
路由变量
有的小伙伴，可能是第一次听见路由变量这个词。 什么是路由变量了，顾名思义就是这个路由地址是动态的，不是固定的。 它的运用场景是哪里呢？ 比如说:1.详情页的地址，我们就可以去使用路由变量。 比如说博客园的文章详情：https://www.cnblogs.com/IwishIcould/p/15658121.html 15658121 就是就是一个变量的值 下面我们简单的在vue路由中去配置路由变量 vue3 路由变量的使用
const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home }, { path: '/new/:id', name: 'new', component: () => import('../views/new.vue') }, ] 
疑惑的地方
大家看见 path: '/new/:id', 可能会觉得疑惑。 这个是个什么玩意！还可以这样去写？ 好了不给大家兜圈子其实 :id==>是一个变量，就是我们上面说的路由变量。 /new/:id ==>对应的路由地址是 /new/xxx。 [你可以理解为是博客园的，https://www.cnblogs.com/IwishIcould/p/15658121.html。xxx=15658121] 当你在页面上输入 http://localhost:8080/new的时候， 并不会去展示"/new"路由对应的new页面。 需要输入 http://localhost:8080/new/xxx 才能够展示对应的new页面。 这个xxx可以是任意值，想必你清楚路由变量了。 【友情提示】 注意在地址栏输入:http://localhost:8080/new/xxx/aaa 是不会展示对应的new页面。 如何获取路由变量的参数？
<template> <div class="home"> 新闻页id==> {{ $route.params }} </div> </template> <script lang="ts"> import { defineComponent ,onBeforeMount,reactive,toRaw} from 'vue'; import { useRoute} from 'vue-router' export default defineComponent({ setup(){ let route=useRoute() console.log('route获取参数',route.params.id); return { route } } }); </script> 需要注意的是，不能够通过 route.query.id这个样子的方式来获取参数。 而是要通过 route.params.id.来获取路由变量。 
如何处理项目中不存在的路由
在我们的项目的时候，用户可能在地址栏输入存在的地址。 比如我在博客园上输入一个不存在的地址，我们看看他们是怎么处理的？ 我们发现博客园上有一个页面展示【您访问的资源不存在】 在我们使用vue做管理系统,怎么处理这个问题呢? 我们使用 path: '/:catchAll(.*)', 【友情提示】catchAll是我自己定义的，当然你也可以定义其他值。 比如说：path: '/:nopage(.*)', 
处理404页面的办法
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Home from '../views/Home.vue' const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home }, { path: '/new/:id', name: 'new', component: () => import( '../views/new.vue') }, { path: '/:catchAll(.*)', name:'notfined', component: () => import( '../views/notfined.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router 需要注意的点
{ path: '/:catchAll(.*)', name:'notfined', component: () => import( '../views/notfined.vue') } 为什么要放置在最后面了? 因为如果你放置在前面的话，就会匹配到这个路由。 本来人家是有对应的展示页面，你可倒好. 给人家匹配了一个404页面。 这个是vue3处理404。 vue2的话直接使用 { path: '*', name: 'notfined', component: () => import('../views/notfined.vue') } 我们需要注意一下vue2和vue3的区别 下面这张图是我们处理404的页面 
vue如何路由需要正则表达怎么处理
我们刚刚说了，有些时候我们需要使用路由变量。 但是我们很多时候要求这个变量是要满足我们的规则。 如果这个变量的值必须是数字，必须包含某个字符。这样的情况怎么处理了？ 我们可以在路由中使用正则表达的。 我们看一下，下面的3个例子 路由正则如何处理
{ path: '/new/:id(\d+)', name: 'new', component: () => import( '../views/new.vue') }, id(\d+)==》第一个表示转移。第二个d表示数字开头 http://localhost:8080/new/123 才可以访问 http://localhost:8080/new/aaa 访问失败，因为aa不是数字 路由多个参数
{ path: '/new/:id+', name: 'new', component: () => import( '../views/new.vue') }, '/new/:id+', 表示可以有一个或者多个参数 访问：http://localhost:8080/new/123a/123123 参数可以有也可以没有,也可以时任意多个
{ path: '/new/:id*', name: 'new', component: () => import( '../views/new.vue') }, 嵌套页面
{ path: '/user/:type', //type的值可以时是hengban，这里其实是 /user/hengban 或者/user/shuban name: 'user', component: () => import('../views/user.vue'), children: [ { path: 'hengban', //不需要斜杠 name: 'hengban', component: () => import('../views/hengban.vue') }, { path: 'shuban', //不需要斜杠 name: 'shuban', component: () => import('../views/shuban.vue') }, ] }, 访问 http://localhost:8080/user/hengban/shuban 出现横板 http://localhost:8080/user/shuban/shuban 出现竖版 #### user.vue 页面 这里说明了 一个路由中可以有多个路由容器。 多个容器可以在更新数据的时候局部刷新 <template> <div> 我是路由容器 <router-view></router-view> </div> </template> 需求描述
有些时候，我们可能会遇见这样的场景。 不同的路由地址，但是对应的是同一个页面。 这个时候我们有两种办法来解决，第一种就是在地址栏通过参数来区分。 还有一种使用路由别名。其实就是说:这个路由还有另外一个名称。 可以理解我们人的[小名]。?? 上面这个嵌套的方法，在项目中使用的很少。 我们一般不这样去使用 路由别名 alias的简单使用
{ path: '/about', alias:'/aboutbieming', //使用别名 name: 'About', component: () => import('../views/About.vue') }, 当我们在地址栏栏输入 http://localhost:8080/about和http://localhost:8080/aboutbieming 都展示About页面 可怜兮兮的我
如果你觉得我写的不错的话，可以给我点一个赞或者推荐 当然看官们可以给我打赏，已经三个月没有吃辣条了呜呜? 
