vue中的路由跳转方法，详细（vue路由跳转）

本文介绍: 补充：获取参数的时候是$route（$route是用来获取路由信息的），而不是$router（$ router是用来操作路由的），然后以上都可以写成行内跳转方式，例如@click=”$router.back(-1)” 。

ti ps：<router–link/&g t;通过 t o 属性和path和name进行跳转，并进行参数传递；

1、无参数跳转，可通过 path和name跳转；

eg: 

&lt;router-link to="/about"&gt;About</router-link &gt;//to不带冒号

<router-link :to="{ path:'/about' }"&gt;About</router-link&gt;//:to带冒号

<router-link :to="{ name: 'about' }">About</router-link>//:to带冒号

2、有参数跳转，同样可通过 path和name跳转；

 eg1:

<router-link :to="{name:'home', query: {id:1}}">

// query 传参数 (类似get，url后面会显示参数)；
// html 取参 $route.query.id // script 取参 thi s.$route.que ry.id；

eg2:

<router-link :to="{name:'home', params: {id:1}}">

// params 传参数，类似post，刷新页面 id会消失，路由配置 path: “/home/:id” 或者 path: “/home:id“；
// html 取参 $route.params.i d // script 取参 thi s.$route.params.i d；

eg1:
//不带参数
this.$router.push("/about") 
//带参数 query传参
this.$router.push({path: 'about', query: {account: this.account}})
// 接收参数
this.account = this.$route.query.account

//行内跳转方式(同样可以传参)：
@click="$router.push('/about')"


eg2:
//同样也可以通过params传参，可以搭配动态路由使用

eg:
//当前页面路由信息不会被记录，使用时方法同上
this.$router.replace("/about");

eg:

this.$router.go(-1);//返回上一个页面

this.$router.go(-2);//返回上一个的上一个页面

this.$router.go(0);//可以用来刷新页面

eg:

this.$router.back(-1);//返回上一个页面,原页面的路由参数不会消失

eg:
//通过a标签跳转vue官网
<a href="https://vuejs.bootcss.com/guide/" target="_blank">vue.js</a>

//_blank表示跳到新页面打开，打开一个新窗口
//_self表示当前页面打开链接
//_parent表示在父集框架中打开
//_top表示在整个窗口中打开
//framename表示在指定的框架中打开