美文网首页
vue 路由跳转的方式总结

vue 路由跳转的方式总结

作者: 一只章鱼哥 | 来源:发表于2021-02-01 18:31 被阅读0次

1.路由标签跳转

<router-link :to="{path, params, query}"></router-link>

path表示跳转的路径

name表示跳转路由名称

2.函数操作(params方式传参)

// 对象写法
this.$router.push({
  name: 'router name',
  params: {
    key: value
      ...
    }
})
// 字符串写法
this.$router.push('/index/page1)

3.函数操作(query方式传参)

// 对象写法
this.$router.push({
  name: 'router name',
  query: {
    key: value
      ...
    }
})
// 字符串写法
this.$router.push('/index/page1?param1=param1&param2=param2')

相关文章

  • Vue router组件化开发总结

    Vue router就是Vue路由,是Vue不同组件之间跳转的重要方式。主要分为带参数跳转和不带参数跳转两种方式在...

  • veu传参几种方式

    1、query的方式 2、params的方式 配置路由: 动态路由子路由 vue路由跳转有四种方式 router-...

  • Vue路由

    一、Vue路由基础用法: 二、Vue路由配置的抽出 三、路由动态传值: 四、路由的跳转方式: 五、路由的hash模...

  • vue 路由跳转的方式总结

    1.路由标签跳转

  • vue路由vue-router快速入手

    路由是vue进行“页面跳转”的实现方式,而vue-router是vue的一个路由组件。https://router...

  • mpvue页面跳转及传值

    vue中 使用 vue-router 来进行路由跳转的。mpvue中只能通过以下几种方式跳转:(1).a 标签 (...

  • vue-router

    跳转路由 vue路由文件router.js 在vue文件中使用路由: 第一种方式我们可以看到name是给路由命名,...

  • vue1.0与vue2.0路由的区别

    个人总结——vue1.0与vue2.0路由的区别 vue1.0 html部分———— 主页 跳转链接 ...

  • Vue方向:Vue路由跳转时组件的属性

    1、通过标签进行路由跳转 1.1 标签跳转路由的方式 Vue Router提供了两个内置的组件帮助我们进行路由的跳...

  • Vue-router

    跳转方式 第一种:普通跳转 第二种:代码跳转 都要定义路由文件: 动态路由 路由懒加载 vue-cli4脚手架的代...

网友评论

      本文标题:vue 路由跳转的方式总结

      本文链接:https://www.haomeiwen.com/subject/evrstltx.html