在写项目的时候，我用的频率比较高的页面跳转的方法有两种   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页面

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

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

 

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