一些传统项目以. html为主。 但是， html页面将值传递给vue项目的场景是不可避免的。 本节介绍html项目如何使用JavaScript将值传递给vue项目。
1 )1:HTML页面传输事件可以自由编写跳转事件。 如下所示。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' initial-scale=1.0 ' title document/title/headbodybuttonid=' BTN ' jump/buttonscriptvarbtn=document.getelementbbbbatn //？ 之后，应该为你传递的参数。 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 ) doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' headbodybuttonid='BTN '跳/buttonscriptvarbtn=document.getelementbyid const person={ id : 1，name : ' John ' 写本节文章时，我的. 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是全局路由对象。 它包含了很多属性和方法。 任何页面都可以使用推式()、替换()、转到(go ) )等方法。 this.$route是当前路由对象。 每个根都有一个route对象。 包含当前根的属性，如name、path、query和params。