路由变量

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

可怜兮兮的我

如果你觉得我写的不错的话,可以给我点一个赞或者推荐
当然看官们可以给我打赏,已经三个月没有吃辣条了呜呜

vue3路由的使用,保证你有所收获!的更多相关文章

  1. 第三十八篇:vue3路由

    好家伙,水博客怎么说 1.0.安装:简简单单的淘宝镜像安装 装一下淘宝镜像(一般都有) npm install -g cnpm --registry=https://registry.npm.taob ...

  2. 手把手教你学Vue-3(路由)

    1.路由的作用 1.当我们有多个页面的时候 ,我们需要使用路由,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 简单的路由 const ro ...

  3. Module加载的详细说明-保证你有所收获

    模块 HTML 网页中,浏览器通过<script>标签加载 JavaScript 脚本. <!-- 页面内嵌的脚本 --> <script type="appl ...

  4. RIP、OSPF、BGP、动态路由选路协议、自治域AS

    相关学习资料 tcp-ip详解卷1:协议.pdf http://www.rfc-editor.org/rfc/rfc1058.txt http://www.rfc-editor.org/rfc/rfc ...

  5. soap 路由

    下面主要通过项目实例来具体阐述如何实现wse路由和一些项目开发中的细节.本人水平有限,有不对的地方,请朋友们不吝赐教. 在开始项目之前,先了解一下路由的概念,所谓"路由",是指把数 ...

  6. restfull规范、DRF视图和路由

    一.restfull规范的简单介绍 1.介绍 REST:表述性状态转移,是一种web交互方案 资源:在web中只要有被引用的必要都是资源 URI: URI 统一资源标识符 URL 统一资源定位符 统一 ...

  7. ip route rule 路由策略 高级路由 捆绑 网桥

    http://lwfs.net/2005/11/28/10/ #!/bin/bash IP0= IP1= GW0= GW1= NET0= NET1= DEV0=eth0 DEV1=eth1 # com ...

  8. 综合练习1,划分vlan,单臂路由,DHCP服务及其限制网段、租期,设置根桥,OSPF路由通告综合练习

    实验要求: 1.在LSW1上分别给vlan10和vlan20做DHCP网段分别为192.168.10.0/24.192.168.20.0/24禁用192.168.10.200-253,192.168. ...

  9. WebApi路由机制详解

    随着前后端分离的大热,WebApi在项目中的作用也是越来越重要,由于公司的原因我之前一直没有机会参与前后端分离的项目,但WebApi还是要学的呀,因为这东西确实很有用,可单独部署.与前端和App交互都 ...

随机推荐

  1. jsp部分乱码(并不是没有设置编码的问题)

    当页面跳转的时候,还是有中文的乱码存在,最后发现我没有写页面的提交方式, <form action = "show.jsp"> 用户名:<input type=& ...

  2. 最强最全面的大数据SQL经典面试题(由31位大佬共同协作完成)

    本套SQL题的答案是由许多小伙伴共同贡献的,1+1的力量是远远大于2的,有不少题目都采用了非常巧妙的解法,也有不少题目有多种解法.本套大数据SQL题不仅题目丰富多样,答案更是精彩绝伦! 注:以下参考答 ...

  3. 【蓝桥杯】第十二届蓝桥杯砝码称重(Python题解)

    @ 目录 题目 [80分] 思路 知识点 代码 题目 [80分] 你有一架天平和N个砝码,这N个砝码重量依次是W1,W2,--,WN请你计算一共可以称出多少种不同的重量? 注意砝码可以放在天平两边. ...

  4. wayne编译支持k8s1.16+

    GitHub: https://github.com/Qihoo360/wayne 文档: 由于wayne 官方文档链接已经失效了,我们可以通过这里查看 wayne 文档, 除了这个地方,我们询问之前 ...

  5. 【LeetCode】496. Next Greater Element I 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 直接遍历查找 字典保存位置 日期 题目地址:http ...

  6. 【LeetCode】893. Groups of Special-Equivalent Strings 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  7. 【剑指Offer】从上往下打印二叉树 解题报告(Python)

    [剑指Offer]从上往下打印二叉树 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews ...

  8. JSON(JS 对象简谱,一种数据交换格式)

    JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式 存储和表示数据的文本格式 层次结构清晰.简洁 JSON是一个序列化的对象或数组 1.js ...

  9. [C++]vector去除重复元素

    #include <iostream> #include <vector> #include <algorithm> #include <set> us ...

  10. 中华古诗词知识图谱之实体关系构建&导入neo4j数据库

    实体分析 诗名实体 属性 包含:作诗时间,诗名,内容,翻译,背景. 关系 实体1 关系 实体2 诗名 形式 诗词形式 诗名 作者 诗人 诗名 分类 类别 诗名 词牌名 词牌名 诗名 曲牌名 曲牌名 诗 ...