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

简述Vue路由可以帮助你在单页应用管理应用不同页面页面间的跳转通过Vue路由,你可以实现页面动态切换和无刷新加载提升用户体验和页面性能今天就来分享下Vue路由和页面之间的跳方式。

一、<routerlink/>

tips:<routerlink/>通过to属性pathname进行跳转,并进行参数传递

1、无参数跳转,可通过pathname跳转;

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、有参数跳转,同样可通过pathname跳转;

 eg1:

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

  // query传参数 (类似geturl后面会显示参数);
  // html 取参  $route.query.id  // script 取参  this.$route.query.id

eg2:

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

 // params传参数,类似post,刷新页面id消失路由配置 path: “/home/:id或者 path: “/home:id“;
 // html 取参  $route.params.id  // script 取参  this.$route.params.id

 

query传参params传参区别

1、query传参新页面数据不会丢失,而params传参新页面数据丢失

2、query 可以通过pathname传参,而 params只能使用name传参;

3、query传递的参数会显示地址栏中,而params传参不会;

4、params可以搭配动态路由传参,动态传参的数据显示地址栏中,且刷新页面不会消失,而query不可以;

二、this.$router.push()

tips:this.$router.push()跳转到相应页面,但这个方法会向history添加一个记录点击会跳转到相应页面;

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传参,可以搭配动态路由使用

三、this.$router.replace()

tipsthis.$router.replace()跳转到相应页面,这个方法不会向history栈添加一记录点击后会返回到上上个页面;

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

四、this.$router.go()

tips:this.$router.go()跳转n个页面,n为正数向前跳转n个页面,负数后退n个页面;

eg:

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

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

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

五、this.$router.back()

tips:this.$router.back()用来返回上一层页面,只能返回一层

eg:

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

六、<a/>

tips:超链接作用,可以跳转网页需要使用target属性控制是在当前页面显示还是在新页面中显示,a标签可以嵌套任何标签,除了a标签自己,即a不能套a;

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

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

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

原文地址:https://blog.csdn.net/weixin_65793170/article/details/128230632

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_48870.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注