vue-router实现路由跳转

港控/mmm° 2022-05-17 21:26 282阅读 0赞

用了一个多月的vue了，发现路由跳转的方式还挺多，现在上干货：

1.返回上个页面(不带参数)

this.$router.go(-1);

2.指定跳转的地址(不带参数)

this.$router.replace('/menu');   // '／'后为页面的地址,

3.跳转指定路由的名字下（不带参数）

this.$router.replace({name,'menuLink'});

4.通过push进行跳转（不带参数）

this.$router.push('/menu');  //通过页面地址跳转 不带参数
    
    this.$router.push({name:'menuLink'});  //通过页面名字跳转 不带参数

5.通过push跳转（用query带参数）这种方式参数会显示在页面上

this.$router.push({
    	name: 'menuLink',
    	query:{id:'1'}
    });
    
    //接收参数的方法为：
    this.$route.query.id;

6.通过push跳转（用params带参数）这种方式参数不会显示在页面上

this.$router.push({
    	name: 'menuLink',
    	params:{id:'2'}
    });
    
    //接收参数的方式为
    this.$route.params.id;

7.我现在常用的跳转方式为：

this.$router.push({
    	path:'/addGoods',
    	query:{id:'1'},
    })
      
    //接收参数为：
    this.$route.query.id;

然而，有时候会出现页面找不到的情况，尤其是在pc端，用户可能会在地址栏随便输入地址，这时候，在路由的最后可以加上这么一段：（这一段和以上实际没有多大关系）

{
    	path: '*',
    	name: '404',
    	component: resolve => require(['@/components/page/404'], resolve)
    }

当然，具体怎么写可以根据自己配置路由的方法改变。

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

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

相关阅读

相关 VueRouter路由嵌套

1. 前言本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见，如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置

怼烎@/ 2024年03月30日 18:02/ 0 赞/ 22 阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 15 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 206 阅读

相关 JS实现路由跳转

之前我们用AngularJS实现路由跳转，这一篇我们将用JS实现路由跳转。示例图： ![Center][] 源码： <!DOCTYPE html>

柔情只为你懂/ 2022年06月07日 09:10/ 0 赞/ 233 阅读

相关 vue-router实现路由跳转

用了一个多月的vue了，发现路由跳转的方式还挺多，现在上干货： 1.返回上个页面(不带参数) this.$router.go(-1); 2.指定跳转的地址(不带参

港控/mmm°/ 2022年05月17日 21:26/ 0 赞/ 283 阅读

相关 Vue实现简单路由跳转

1. 新建一个项目 -------------------- 2. 在components中新建一个文件这里是test1.vue，内容如下 ----------

拼搏现实的明天。/ 2022年01月11日 05:25/ 0 赞/ 243 阅读

相关【Vue】路由跳转

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

悠悠/ 2021年12月17日 18:30/ 0 赞/ 420 阅读

相关【Vue】路由跳转

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

清疚/ 2021年12月15日 06:55/ 0 赞/ 393 阅读

相关 react--实现js跳转路由

实现js跳转路由： / 实现js跳转路由：https://reacttraining.com/react-router/web/exampl

雨点打透心脏的1/2处/ 2021年12月11日 00:17/ 0 赞/ 224 阅读

相关 Vue路由跳转+路由传参

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

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 565 阅读