Vue获取url网址参数的两种方法

Vue 有两种方法可以方便地获取 url 的参数:

一种是在路由中配置了 path :

{
    path: '/detail/:id/',
    name: 'detail',
    component: detail,
    meta: {
        title: '详情'
    }
}

获取参数:

let id = this.$route.params.id

注意:

1、参数名需要保持一致

2、如果路由中没有传参(https://w3h5.com/detail),会报错页面无法显示。正常链接应该为 https://w3h5.com/detail/234

如果有的参数可传可不传,可以使用 ? 传参:

https://w3h5.com/detail?id=168

获取方法:

let id = this.$route.query.id

这样即使取不到参数,页面也不会报错。

可以根据自己的需求使用不同的方法获取 url 参数。

未经允许不得转载:Web前端开发资源网 » Vue获取url网址参数的两种方法

推荐阅读:

利用css中的伪类 给元素设置特殊样式效果

jquery导航栏点击及页面跳转后对应栏目添加选中效果

Discuz X3.4 MySQL数据库连接问题的解决方法

QQ聊天插件,鼠标划入划出显示隐藏效果。

各大网站CSS初始化代码集合

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)