vue-router中参数设置的问题

最新推荐文章于 2023-07-11 14:30:29 发布
最新推荐文章于 2023-07-11 14:30:29 发布
阅读量325 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52242662/article/details/123357818
版权
本文深入解析Vue Router的配置，包括scheme（协议）虽常忽略，但基础关键；path定义资源获取路径，用于匹配route；query作为对象类型，用于传递多个查询参数，如在router-link示例中展示；同时，fragment通常不作讨论。理解这些概念对于构建高效的Vue应用路由至关重要。
摘要由CSDN通过智能技术生成

在router配置中，可以从url组成的角度来分析：

scheme：协议 （例如http、https） authority(user/information/host/prot)一般会忽略

path：获取资源的路径就是在router中我们在route中需要的path 

const route = [
    {
        path: '/Home',
        component: Home
    }
]

query：查询参数 在router-link中需要配置的参数（只能是对象）

<router-link :to="{path: "'/Home/'+id", query: { weiget: 140, height: 1.8 }">首页<router-link>

fragidl一般也忽略

PS:注意query必须是对象类型，因为包含多个查询参数。

qq_52242662
关注
专栏目录
vue路由及参数router
nalanxiaoxiao2011的博客
01-09 2145
vue 路由route
vue-router路由配置+传参
最新发布
昵称为啥重复呐的博客
12-28 1068
官网帮助文档地址： https://router.vuejs.org/guide/路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。在Vue中路由就是控制显示哪个页面。通过路由显示的页面是显示在App.vue中的，这符合SPA，当更改URL后只改变App.vue页面中路由对应的部分的内容，也就是说通过路由显示时也是属于局部刷新效果。​ 在App.vue中通过显示路由内容。
vue学习笔记：vue-router参数
peade的博客
12-31 471
在vue-router里，参数分两种，1、动态路径参数；2、查询参数 动态路径参数， 这需要按路由文档里配置，例如：/user/:username 获取动态路径参数时，用 this.$router.params 来获取动态参数值。 查询参数 路径里的查询参数，不需要在路由里设置，可以直接放在路由里。例如 http://localhost:8000/index.htm#/hello?tes...
Vue Router 深度用法
qq_18932003的博客
11-11 919
你可能不清楚的 Vue Router 深度用法（一）_weixin_33949359的博客-CSDN博客 https://segmentfault.com/a/1190000018174887你可能不清楚的 Vue Router 深度用法（二） Vue Router 简单易上手，能实现大部分的需求。但是，如果在项目里需要更细致的控制路由，以实现与其同步的效果，就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。 路由元信息用途 （1）验证用户身份 大部分项目，除了登录页、重置密码页..
vue3+ts 将路由参数传递给子组件报错不能将LocationQueryValue的参数赋值给string类型
weixin_57263939的博客
07-11 1310
不能将LocationQueryValue的参数赋值给string类型
vue-router 中 meta的用法详解
01-21
在vue-router中，meta字段是路由对象的一个属性，用于添加自定义信息，比如权限控制、页面标题等。下面将详细介绍meta的用法，并通过实例解释如何获取和使用meta信息。 首先，当我们在定义路由时，可以在每个路由...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
通过这个示例项目，你可以了解到如何在 Vue3.x、Vite 和 TypeScript 的环境中设置和使用 Vue Router 4.x，这将对你的前端开发技能有极大的提升。同时，实践项目也能帮助你更好地理解和掌握这些技术的实战应用。
解决vue-router 切换tab标签关闭时缓存问题
10-15
在Vue.js应用中，使用Vue Router进行页面导航时，可能会遇到一些关于页面缓存的问题，尤其是在涉及切换Tab标签时。本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。 首先，Vue Router中的...
解决VUE-Router 同一页面第二次进入不刷新的问题
10-15
在开发Vue.js应用时，...通过上述方法，我们可以解决Vue-Router中同一页面第二次进入不刷新的问题，并且可以有效处理页面刷新时的参数丢失问题，保证用户的操作体验。希望这些解决方案对你在实际开发过程中有所帮助。
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
首先，我们需要在创建VueRouter实例时提供一个`scrollBehavior`方法： ```javascript const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // 返回期望滚动到的位置 } ...
『分分钟玩转VueRouter●上』VueRouter的一些基础配置
一个非常Cool的人
12-27 1046
计算机网络中有一个路由的概念：路由是指网络数据包发送到目的地址的路线，如果路由规划合理，那么数据走的速度就更快，延迟就更低，网络体验就更好。vue中的路由与其有着很多相似之处指的就是浏览器所请求的url，如果合理的使用VueRouter可以提升用户体验、可以提高Web应用的稳定性。
ant design pro Routes和authority用法及搭配使用2
jjw_zyfx的博客
06-29 796
Vue配置路由参数
weixin_38036079的博客
06-12 6572
vue的路由参数
关于vue-router中动态路由与路由守卫详情
weixin_51029697的博客
04-27 1541
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' /* 关于vue-router知识点： createRouter： 创建一个可以被 Vue 应用程序使用的路由实例。 查看 RouterOptions 中的所有可以传递的属性列表。 createWebHashHistory： 创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)， 或当配置服务器不能处理任意 U.
19 Vue-router参数
行走的皮卡丘
08-07 593
19 Vue-router参数
vue-router路由参数（params和query）
lzzw的学习之路
06-15 7529
vue-router路由参数（params和query）
Vue router传参与接收参数（含router路由基础配置）
风吹草低见牛羊
07-23 4539
一、router配置 import App from '../app' const home = r =&gt; require.ensure([], () =&gt; r(require('../components/home')), 'home') const login = r =&gt; require.ensure([], () =&gt; r(require('../compo...
vue-router之路由属性配置说明（十）
weixin_33775572的博客
05-08 3123
代码如下：exportdefaultnewRouter({ mode:'history',//路由模式，取值为history与hash base:'/',//打包路径，默认为/，可以修改 routes:[ { path:string,//路径 ccomponent:Component;//...
vue权限控制路由（vue-router 动态添加路由）
热门推荐
qq_28529373的博客
09-13 7万+
    用户登录后返回权限菜单，前端根据权限菜单动态添加路由，然后再动态生成菜单栏。     思路如下：     一、定义初始化默认路由。 二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。 三、通过匹配，把匹配好的路由数据addRoutes到路由中。 四、为了防止刷新页面后路由数据被清空，这里用判断是否登录的方式，再次...
vue-router 获取参数
09-13
在定义路由时，可以在路由路径中设置参数，如下所示： ```javascript const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ``` 然后，在组件中可以通过this.$route....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_52242662

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值