Home >Web Front-end >Vue.js >How to jump to another page in vue
How to implement vue to jump to another page: 1. Add a jump function in the a tag; 2. Add the jump url to $router; 3. Through the combination of "path query" Just pass the parameters.
The operating environment of this article: windows7 system, vue2.5.17 version, DELL G3 computer.
How to jump to another page in vue?
Solution for vue to jump from one page to another and carry parameters
1. Requirements:
Click on the mall to jump to the commercial list
Solution:
meta page:
a tag Adding a jump function
<a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo('M000989')"><i class="sIRicon"></i>商场</a>
toMallInfo: function(mallCode){ this.$router.push({ path: '/propertyInfo/mall/mallList', // name: 'mallList', query: { mallCode: 'M000989' } }) },
will add the jump url to $router.
Adding / at the front of the url in the path means it is in the root directory. If it is not added, it is a sub-route.
Pass parameters through the combination of path query
----
Jump page to receive parameters
created(){ this.getParams() }, methods :{getParams(){ // 取到路由带过来的参数 const routerParams = this.$route.query.mallCode // 将数据放在当前组件的数据内 this.mallInfo.searchMap.mallCode = routerParams; this.keyupMallName() } }, watch: { '$route': 'getParams' }
Solution! ! !
Recommended learning: "vue tutorial"
The above is the detailed content of How to jump to another page in vue. For more information, please follow other related articles on the PHP Chinese website!