vue中的路由跳转方法,详细(vue路由跳转)

痛定思痛。 2023-10-02 23:42 87阅读 0赞

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

tips:通过to属性和path和name进行跳转,并进行参数传递;

1、无参数跳转,可通过path和name跳转;

  1. eg:
  2. <router-link to="/about">About</router-link >//to不带冒号
  3. <router-link :to="{ path:'/about' }">About</router-link>//:to带冒号
  4. <router-link :to="{ name: 'about' }">About</router-link>//:to带冒号

2、有参数跳转,同样可通过path和name跳转;

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

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

  1. eg2:
  2. <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 可以通过path和name传参,而 params只能使用name传参;

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

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

二、this.$router.push()

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

  1. eg1:
  2. //不带参数
  3. this.$router.push("/about")
  4. //带参数 query传参
  5. this.$router.push({path: 'about', query: {account: this.account}})
  6. // 接收参数
  7. this.account = this.$route.query.account
  8. //行内跳转方式(同样可以传参):
  9. @click="$router.push('/about')"
  10. eg2:
  11. //同样也可以通过params传参,可以搭配动态路由使用

三、this.$router.replace()

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

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

四、this.$router.go()

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

  1. eg:
  2. this.$router.go(-1);//返回上一个页面
  3. this.$router.go(-2);//返回上一个的上一个页面
  4. this.$router.go(0);//可以用来刷新页面

#

五、this.$router.back()

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

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

六、

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

  1. eg:
  2. //通过a标签跳转vue官网
  3. <a href="https://vuejs.bootcss.com/guide/" target="_blank">vue.js</a>
  4. //_blank表示跳到新页面打开,打开一个新窗口
  5. //_self表示当前页面打开链接
  6. //_parent表示在父集框架中打开
  7. //_top表示在整个窗口中打开
  8. //framename表示在指定的框架中打开

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

发表评论

表情:
评论列表 (有 0 条评论,87人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue

    所谓的router就是动态的往根里面挂载组件,而不是手动挂载。 vue路由配置的步骤: https://router.vuejs.org/ 1.安

    相关 Vue

    [【Vue】路由跳转][Vue] 路由跳转有几种方式,我用的最多的是$router.push的方法: 实践: 例如下面的页面,要求点详情跳转到详情页。 ![在这里

    相关 Vue

    路由跳转有几种方式,我用的最多的是$router.push的方法: 实践: 例如下面的页面,要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

    相关 Vue+传参

    之前在原生JS的开发中,我们经常会用到根据某一状态进行页面的跳转。 比如:登录成功跳到首页,点击商品列表的某个商品跳转商品详情等。 而常见的写法就是: locat