vue如何与Vue Router深度链接

发布时间:2022-03-16 14:55:04 作者:小新
来源:亿速云 阅读:264

小编给大家分享一下vue如何与Vue Router深度链接,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

与 Vue Router 深度链接

你可以在 URL 中存储(一些)状态,允许你直接跳转到页面上的特定状态。

比如你可以加载一个已选择日期范围过滤器的页面:

someurl.com/edit?date-range=last-week

这对于用户可能共享大量链接的应用程序部分、服务器呈现的应用程序或在两个独立应用程序之间传递比常规链接通常提供的信息更多的信息非常有用。

你可以存储过滤器、搜索值、模式是打开还是关闭,或者我们滚动到的列表中的位置——非常适合无限分页。

使用vue-router这样的方式获取查询(这也适用于 Nuxt 和 Vuepress 等大多数 Vue 框架):

const dateRange = this.$route.query.dateRange;

要更改它,我们使用RouterLink组件并更新query:

<RouterLink :to="{
  query: {
    dateRange: newDateRange
  }
}">

看完了这篇文章,相信你对“vue如何与Vue Router深度链接”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. vue-router 入门学习
  2. vue-router的实现原理

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue vue router

上一篇:vue如何观察数组和对象

下一篇:vue模板标签怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》