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

Vue路由器的新手，即使在阅读了2次文档之后也很难将其整合在一起

什么页面？

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',
        component: Index,

      },
      {
        path: '/news/:tag',
        name: 'TaggedNews',
        component: Index,
      },
      {
        path: '/news/:id([a-f0-9]{32})/:title',
        name: 'NewsItem',
        component: Index,
      },
      {
        path: '/news/:tag/:id([a-f0-9]{32})/:title',
        name: 'TaggedNewsItem',
        component: Index,
      },
    ],
  })
}

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

• 我在该页面上有一个过滤器搜索和标记功能

默认URL

• “/”对应于带有filter=latestsearch=empty string和tag=all的主页，并按发布日期的降序显示最新文章，上面有任何标记

搜索

• /新闻？搜索=中国
• 当搜索为空字符串时，URL中不存在搜索查询

过滤器

• /新闻？过滤=喜欢
• 筛选器有3个值：“喜欢”、“不喜欢”和“最新”
• 当筛选器为“最新”时，URL中不存在筛选器查询

标记

• /新闻/特朗普将显示所有贴有特朗普标签的帖子
• 标记为“全部”时，URL中不存在标记参数

组合

• 搜索、筛选和标记可以组合在一起
• /其中filter=latest，search=空字符串，tag=all
• /新闻？filter=likes&search=china其中filter=likes、search=china和tag=all
• /新闻/特朗普？过滤器=喜欢&搜索=中国，其中过滤器=喜欢，搜索=中国，标签=特朗普

项目URL

• 单击列表中的项目会将顶部的URL更改为项目URL
• /news/：id/：未指定标记时项目的标题，表示标记=全部
• /news/：tag/：id/：在查看特朗普标签下的项目时单击项目的标题

我试过什么？

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',
        component: Index,

      },
      {
        path: '/news/:tag',
        name: 'TaggedNews',
        component: Index,
      },
      {
        path: '/news/:id([a-f0-9]{32})/:title',
        name: 'NewsItem',
        component: Index,
      },
      {
        path: '/news/:tag/:id([a-f0-9]{32})/:title',
        name: 'TaggedNewsItem',
        component: Index,
      },
    ],
  })
}

有什么问题吗？

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',
        component: Index,

      },
      {
        path: '/news/:tag',
        name: 'TaggedNews',
        component: Index,
      },
      {
        path: '/news/:id([a-f0-9]{32})/:title',
        name: 'NewsItem',
        component: Index,
      },
      {
        path: '/news/:tag/:id([a-f0-9]{32})/:title',
        name: 'TaggedNewsItem',
        component: Index,
      },
    ],
  })
}

• 假设我在/news？filter=likes&search=china，我单击一个项目并转到/news/123456/某个随机标题。现在，如果尝试导航到另一个列表，我将丢失查询和搜索值
• 当我将过滤器更改为最新版本时，需要将其从URL中删除
• 当我将搜索设置为空字符串时，它需要从URL中删除
• 如果我输入/？filter=likes，它应该带我到/news？filter=likes
• 如果我输入/新闻，我应该返回/
• 如果我输入/新闻/我返回的所有内容/
• 如果我输入/news/all？search=china，我将被重定向到/news？search=china
• 基本上，默认值是在URL中通过不显示来管理的
• 我如何区分我通过按下URL来更改URL与用户按下后退/前进按钮以及URL因此而更改
• 我如何做到这一点

研究如何在大多数情况下使用导航。研究如何在大多数情况下使用导航。