vue3路由的使用，保证你有所收获！

时间：2024-03-12 19:16:23

路由变量

有的小伙伴，可能是第一次听见路由变量这个词。
什么是路由变量了，顾名思义就是这个路由地址是动态的，不是固定的。
它的运用场景是哪里呢？
比如说: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>

需求描述

有些时候，我们可能会遇见这样的场景。
不同的路由地址，但是对应的是同一个页面。
这个时候我们有两种办法来解决，第一种就是在地址栏通过参数来区分。
还有一种使用路由别名。其实就是说:这个路由还有另外一个名称。
可以理解我们人的[小名]。