如何使用Vue路由器通过搜索过滤器和标签实现此路由结构？

如何解决如何使用Vue路由器通过搜索过滤器和标签实现此路由结构？

Vue Router的新手，即使阅读了2次文档后，仍然很难将它们放在一起

哪些页面？

我有一个新闻网站，当单击项目列表时，页面在左侧显示项目列表，在右侧显示详细信息

该页面上具有过滤搜索和标记功能

默认URL

'/'对应于具有 filter = latest search = empty string 和 tag = all 的主页，并以降序显示最新帖子发布日期的标签上有任何标签

搜索

/ news？search = china
搜索查询

过滤器

/ news？filter = likes
过滤器具有3个值：“喜欢”，“不喜欢”和“最新”
过滤器查询

标签

/ news / trump将显示所有带有王牌标签的帖子
标签参数

组合

搜索，过滤器和标签可以组合在一起
/其中filter =最新，搜索=空字符串，标签=全部
/ news？filter = likes＆search = china，其中filter =喜欢，search =中国，tag =全部
/ news / trump？filter = likes＆search = china，其中filter =喜欢，search =中国，tag =王牌

商品网址

单击列表中的项目会将顶部的URL更改为项目URL
/ news /：id /：title为项目，表示tag = all
/ news /：tag /：id /：title的标题，同时查看王牌标签下的商品

我尝试了什么？

import Vue from 'vue'
import Router from 'vue-router'

import Index from '~/pages/index'

Vue.use(Router)
export function createRouter() {
  return new Router({
    mode: 'history',routes: [
      {
        path: '/',name: 'Index',component: Index,},{
        path: '/news',name: 'News',{
        path: '/news/:tag',name: 'TaggedNews',{
        path: '/news/:id([a-f0-9]{32})/:title',name: 'NewsItem',{
        path: '/news/:tag/:id([a-f0-9]{32})/:title',name: 'TaggedNewsItem',],})
}

出了什么问题？

让我说我在/ news？filter = likes＆search = china，我单击一个项目并转到/ news / 123456 / some-random-title现在，如果尝试导航到另一个，我将丢失查询和搜索值列表
当我将过滤器更改为最新过滤器时，需要将其从网址中删除
当我将搜索设置为空字符串时，需要将其从URL中删除
如果我输入/？filter = likes，应该带我去/ news？filter = likes
如果我输入/ news，我应该回到/
如果我输入/ news / all，则会返回/
如果我输入/ news / all？search = china，则会重定向到/ news？search = china
基本上，默认值是通过不显示在网址中进行管理的
我该如何区分我通过推动URL来更改URL与用户按下后退/前进按钮来更改URL，以及因此而更改URL？
我如何实现这一目标？

如何使用Vue路由器通过搜索过滤器和标签实现此路由结构？

如何解决如何使用Vue路由器通过搜索过滤器和标签实现此路由结构？

相关推荐