HTML页面向Vue页面传值

最新推荐文章于 2024-06-24 16:15:07 发布

想念如果有声音___

最新推荐文章于 2024-06-24 16:15:07 发布

阅读量3.5k

点赞数

分类专栏： Vue HTML 文章标签： vue.js html

本文链接：https://blog.csdn.net/qq_19249021/article/details/114128989

版权

Vue 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

一些传统的项目一般还是以.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
点赞
踩
13

收藏

觉得还不错? 一键收藏
5
评论
HTML页面向Vue页面传值

一些传统的项目一般还是以.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="I.
复制链接

扫一扫

专栏目录