路由变量
有的小伙伴，可能是第一次听见路由变量这个词。
什么是路由变量了，顾名思义就是这个路由地址是动态的，不是固定的。
它的运用场景是哪里呢？
比如说: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页面
可怜兮兮的我
如果你觉得我写的不错的话，可以给我点一个赞或者推荐
当然看官们可以给我打赏，已经三个月没有吃辣条了呜呜😢
![[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法](https://ucc.alicdn.com/pic/developer-ecology/iwb4s2erfjeee_d14da44e4e4d4f2ab6c458dc8c34c9f5.png?x-oss-process=image/resize,h_160,m_lfit)
