How to jump to different pages by vue
-link jump
<!-- Jump directly --> <router-link to='/testC'> <button>Click to jump2</button> </router-link> <!-- Jump with parameters --> <router-link :to="{path:'testC',query:{setid:123456}}"> <button>Click to jump1</button> </router-link> <router-link :to="{name:'testC',params:{setid:1111222}}"> <button>Click to jump3</button> </router-link>
.$()
<template> <div id='app'> <button @click='goTo()'>Click to jump4</button> </div> </template> <script> new Vue({ el:'#app', methods:{ goTo(){ //Jump directly this.$('/testDemo'); //Jump with parameters this.$({path:'/testC',query:{setid:123456}}); this.$({name:'testC',params:{setid:111222}}); } } }) </script>
Tags can jump to external links, but not routed to jump to
<a href=""><button>Click to jump5</button></a>
Receive: this.$ and this.$
Vue three different ways to jump to page
Vue:router-link
<router-link to="/">[Jump to homepage]</router-link> <router-link to="/login">[Log in]</router-link> <router-link to="/logout">[Sign out]</router-link> this.$("/");
this.$("/")
<button @click="goHome">[Jump to homepage]</button> export default { name: "App", methods: { // How to jump to page goHome() { this.$("/"); }, }
this.$(1)
<button @click="upPage">[Previous page]</button> <button @click="downPage">[Next page]</button> upPage() { // A step back record is equivalent to () this.$(-1); }, downPage() { // Going forward in browser records is equivalent to () this.$(1); }
Code example:
<template> <div > <img src="./assets/"> <router-view/> <router-link to="/">[Jump to homepage]</router-link> <router-link to="/login">[Log in]</router-link> <router-link to="/logout">[Sign out]</router-link> <!-- javascriptJump to page --> <button @click="goHome">[Jump to homepage]</button> <!-- Back to the previous page --> <button @click="upPage">[Previous page]</button> <button @click="downPage">[Next page]</button> <!-- 回到Next page --> </div> </template> <script> export default { name: "App", methods: { // How to jump to page goHome() { this.$("/"); }, upPage() { // A step back record is equivalent to () this.$(-1); }, downPage() { // Going forward in browser records is equivalent to () this.$(1); } } }; </script>
Summarize
This is the end of this article about several commonly used methods of vue jump page. For more related vue jump page content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!