vue中实现页面跳转的方法

在写项目的时候，我用的频率比较高的页面跳转的方法有两种   vue-router  和   绑定click方法

 

1.vue-router

先在index.js文件中引入两个页面

//src > r0uter > main.js import Home from '@/pages/home/Home' import List from '@/pages/list/List' export default new Router({ routes: [ {path: '/', name: 'Home', component: Home },{ path: '/list', name: 'List', component: List } ] })

直接在div外部套一个router-link，这样点击div的时候就会跳转到list页面

<!--home--> <router-link to="/list"> <div></div> </router-link>

 

！当然可能页面会报错，这时候检查一下有没有引入router组件

//main.js import Router from 'vue-router'

 或者

//index.js import Router from 'vue-router'

这两者缺一不可

 

这样就不会编译错误了，回到页面，点击div可以成功跳转到list页面

如果你想从list回到home，只需要重复上面的代码，在list中引入一个router-link就可以

 

2.@click

第二种方法就是给元素绑定一个click方法，引入一个@click属性，然后在methods中调用它

<!--html--> <div class="nav"> <a class="home" @click="gohome"><span>home</span></a> <a class="list" @click="golist"><span>list</span></a> </div> //js methods: { gohome(){ this.$router.replace('/home') }, golist(){ this.$router.replace('/list') } }

这里我是给导航栏设置的跳转方法，点击home的时候会跳转到home页面，点击list的时候会跳转到list页面

给两个页面同时设置这种方法，就可以实现来回跳转的功能

我个人觉得这种方法也是非常实用的

 

这篇文章分享了两种实现页面跳转的方法，希望可以帮到需要的小伙伴！