HTML页面向Vue页面传值
一些传统的项目一般还是以.html为主。但是难免会有.html页面向vue项目传值的场景。本节将介绍html项目利用JavaScript向vue项目传值。1：HTML页面传递事件可以随便写一个用于跳转的事件。如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta h
·
一些传统的项目一般还是以
.html为主。但是难免会有.html页面向vue项目传值的场景。本节将介绍html项目利用JavaScript向vue项目传值。
1：HTML页面传递事件
可以随便写一个用于跳转的事件。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id = 'btn'>
跳转
</button>
<script>
var btn = document.getElementById('btn')
btn.onclick = function() {
// 下方为你的vue项目地址。写本节文章时我的.html文件放在vue项目的根目录。
// ?之后的为你需要传递的参数。采用 key = value形式
location.href = 'http://localhost:8080/#/?id=123'
}
</script>
</body>
</html>
2. Vue项目接收值
html传递过来的参数可以在vue项目中通过this.$route来获取到。
// vue项目其他代码不做赘述
// 此处传递的为基础数据类型
// 可以在created钩子函数下获取
created () {
console.log(this.$route.query.id)
}
3. 如果html传递的是对象参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id = 'btn'>
跳转
</button>
<script>
var btn = document.getElementById('btn')
const person = {
id: 1,
name: 'john'
}
btn.onclick = function() {
// 下方为你的vue项目地址。写本节文章时我的.html文件放在vue项目的根目录。
// ?之后的为你需要传递的参数。采用 key = value形式
location.href = 'http://localhost:8080/#/?obj=' + JSON.stringify(person)
}
</script>
</body>
</html>
4. vue项目中接收对象参数的值
// vue项目其他代码不做赘述
// 此处传递的为基础数据类型
// 可以在created钩子函数下获取
created () {
console.log(JSON.parse(this.$route.query.obj))
}
注意：上面的是 this.$route 。而不是this.$router。
两者区别：
this.$rotuer为全局路由对象。包含很多属性和方法。任何页面都可以使用push()、replace()、go()等方法。this.$route为当前路由对象。每一个路由都会有一个route对象。里面包含当前路由的name、path、query、params等属性。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)