路由跳转以及参数处理


项目中如果要使用一些参数,比如数据详情页面,YESWEB开发框架中不要使用带参数路由

因为框架中,显示tag是通过url去匹配的,

路由定义

包含参数的路由

JavaScript 全选
{
	path: '/demosales/view/:id',
	name: 'demosales_view',
	title: '查看数据',
	component: () => import( /* webpackChunkName: "demosales_dataview" */ './data-view.vue')
}

包含参数的路由2 参数可选

参数后面带上问号?,代表该参数为可选参数

JavaScript 全选
{
	path: '/demosales/data/:id?',
	name: 'demosales_data',
	title: '明细数据',
	component: () => import( /* webpackChunkName: "demosales_dataview" */ './data-view.vue')
}

路由跳转

路由参数

利用this.$router.push的方式进行路由跳转,params为路由参数

JavaScript 全选
this.$router.push({
	name:'demosales_view',
	params: {
	  id:id
	}
})

更多路由跳转细节,参考:https://www.yesdotnet.com/archive/post/260484735352837.html

URL参数

在URL中以?参数的形式

JavaScript 全选
this.$router.push({
	name:'demosales-dataview',
	query: {
	  id:id
	}
})

获得路由参数值

获得路由参数值

在路由中配置参数

JavaScript 全选
 { path: '/home/newsinfo/:id', component: yesdotnetTest.vue }

VUE获取路由参数的方式

JavaScript 全选
let id = this.$route.params.id

获得URL参数

在URL中配置的get参数 ?后面

Markup 全选
http://192.168.1.105:8080/#/idInput?username=yesdotnet

vue获得url参数的方式

JavaScript 全选
let id = this.$route.query.username

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
评论列表

发表评论

评论内容
昵称:
关联文章

以及参数处理
vue 的几种方式(带参数)
配置
YESWEB 开发框架 配置文件 作用原理
ASP.NET Core MVC中的约束
asp.net core MVC添加.html伪静态url时报错
gulp处理LESS,以及js压缩
C#汉字拼音
VUE IIS根据访问端自动适合的链接
DevExpress表格GridControl添加操作列单元格添加图片按钮并且实现点击链接URL浏览器
获取URL参数的几种方式
使用.NET 6开发TodoList应用(10)——实现DELETE请求以及HTTP请求幂等性
ASP.NET+MVC入门踩坑笔记 (一) 创建项目 项目配置运行 以及简单的Api搭建
C# 使用Newtonsoft对象JSON字符串的时候日期类型的处理
Python pyinstaller 打包参数说明
详解ElasticAPM实现微服务的链追踪(NET)
.net异步Task同步
C#图片处理类:ImageLibrary
ASP.NET MVC使用@Url.Action 多个参数中间&被URL编码了
SEO刷排名工具参数配置指南