Vue:vue-router编程式导航

摘要:
当我们使用router链接跳转到一个页面时,我们也可以使用params属性传递该跳转的参数。push方法给它一个哈希地址。我们可以在注册页面上放置另一个按钮,通过push方法跳转到指定页面。对象包含路径属性,该属性指向要跳转到的地址。查询字符串通过查询属性传递。查询字符串将通过问号拼接到url地址的后面。声明式导航实现了标签的页面跳转。

Vue:vue-router编程式导航第1张

声明式导航通过标签来实现页面跳转,编程式导航通过调用js的API来实现跳转,在vue中最常见的编程式导航API是push函数和go函数,

声明式导航:

Vue:vue-router编程式导航第2张

 Vue:vue-router编程式导航第3张

通过命名路由的name属性,可以实现路由的导航和跳转

给路由规则加一个name属性,这样就变成一个命名路由了,这个命名路由可以帮助我们实现路由跳转,需要再to前面加一个属性绑定的冒号,

to前面加一个冒号,代表属性绑定,name代表我们要跳转的路由规则,params代表我们携带的路由参数,

作用:可以通过name路由实现页面的跳转,我们在使用router-link去跳转页面的时候,可以直接写一个path路径之外,还可以指定一个name,表示点击当前链接,希望跳到这个name所指定的路由规则中,此外还可以使用params属性给这一次跳转传递参数。

Vue:vue-router编程式导航第4张

 Vue:vue-router编程式导航第5张

Vue:vue-router编程式导航第6张

其中push方法给它一个hash地址,就能跳转到指定的组件页面,go方法是为了实现前进和后退的,n是一个数值,如果传1表示在历史记录中向前走一位,如果传-1,在历史记录中后退一位,

Vue:vue-router编程式导航第7张

 Vue:vue-router编程式导航第8张

我们已经通过编程式导航,跳转到了注册页面,也希望通过按钮后退到刚才的user页面,我们可以在注册页面中再放一个button按钮

Vue:vue-router编程式导航第9张

通过push方法跳转到指定的页面,通过go方法可以前进和后退

编程式导航的push方法还有一些其他的用法,比如说

Vue:vue-router编程式导航第10张

1、可以给push方法提供一个对象,对象中包含path属性,也指向一个hash地址,

2、可以给push方法提供一个对象,不用path属性,而是name属性,来实现命名路由的导航,同时还可以用params属性传参;

3、可以给push方法提供一个对象,path属性指向要跳转到的地址,通过query属性传递查询字符串,查询字符串会通过问的形式拼接到url地址的后面去。

声明式导航通过标签来实现页面跳转,编程式导航通过调用js的API来实现跳转,在vue中最常见的编程式导航API是push函数和go函数,

使用案例:

jumpOther(items, indexValue) {
      // this.$router.push(itemPath);
      if (indexValue) {
        this.$router.push({
          path: '/medContent1',
          query: {
            entityId: items.entityId,
            materialsCode: items.materialsCode,
            batch: items.batch,
            type: items.type,
            Openid: items.openId
          }
        })
      } else {
        this.$router.push({
          path: '/medContent1',
          query: {
            entityId: items.entityId,
            materialsCode: items.materialsCode,
            batch: items.batch,
            type: items.type,
            Openid: items.openId
          }
        })
      }
    },

其中路由规则如下:

{
  path: '/medContent1',
  component: () => import('@/views/medContent/index1')
},

 获取参数:this.$route.query.entityId。

 

免责声明:文章转载自《Vue:vue-router编程式导航》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇signal,blinker:信号(看我脸色行事)Sql Server 收缩日志文件原理及always on 下的实践下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

openwrt-智能路由器hack技术(1)---"DNS劫持"

openwrt-智能路由器hack技术(1)---"DNS劫持" 1导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所以现在整理拆分一下,从小处写起, 本系列介绍了两个关于智能路由器的hack技术,供大家赏玩一下。 本文提到的两个基于网络的hack技术: DNS劫持 数据抓包 基本本质上就是路由器设备的...

openwrt防火墙firewall

知识链接:linux平台下防火墙iptables原理 一、 OpenWrt 内置防火墙介绍   Openwrt 是一个 GNU/Linux 的发行版, 和其他大多数的发行版一样,Openwrt 的防火墙同样也是基于 iptables。 在 OpenWRT 下防火墙的默认行为已经可以满足路由器的需要,一般情况下也无需修改。OpenWrt 关于 NAT、 DM...

多线程和异步委托基础详解

在讲多线程前。先回忆下异步委托:       /*            异步委托自我解释:即用.net委托来自动创建次线程(子线程)以处理异步方法的调用         * 当调用BeginInvoke()方法的时候,程序就会自动创建一个子线程去处理异步委托的方法。         */ //线程被定义为可执行应用程序中的基本执行单元 1 //1:S...

多行文字内容溢出显示点点点(...)省略号

1、常规css方法——使Firefox以外主流浏览器文字溢出省略号表示 下图为此常用方法在各个浏览器下的表现: IE6浏览器下 IE7浏览器下 chrome谷歌浏览器下 Safari浏览器下 opera浏览器下 Firefox火狐浏览器下 可以看到,仅在Firefox火狐浏览器下无法实现文字溢出省略号表示,其文字直接从中间咔掉了。综...

C#基础强化-继承与多态

/**  特性:    单根性:一个子类只能有一个父类    传递性:爷爷类 爹类 儿子类  里氏转换    1、子类可以赋值给父类    2、如果父类装的是子类对象,则可以将这个父类转换为对应的子类 is as 关键字    -->关键字      1、is:返回bool类型,指示是否是这个类型      2、as:如果转换成功返回对象,否则返回n...

(转)示例化讲解RIP路由更新机制

  目录(?)[+]       以下内容摘自最新上市的“四大金刚”图书之一《Cisco路由器配置与管理完全手册》(第二版)(其它三本分别为《Cisco交换机配置与管理完全手册》(第二版)、《H3C交换机配置与管理完全手册》(第二版)和《H3C路由器配置与管理完全手册》(第二版)),目前这四本新书在各大网店中均有销售:http://item.jd.com...