前两天看到小红书网页版的这个效果，感觉挺神奇的：

就是它同一个url对应了两种不同的页面。

上面这个是从列表页点开一个文章的时候，浏览器的路由变了，但是页面没有发生跳转，而是以一个弹窗的模式显示文章，底下我们还能看到列表。

但是当我们把这个url发送给别人，或者刷新浏览器后，同一个url会显示为下面这一个文章详情页，这样就避免了查看详情的时候还需要加载背后的列表。并且小红书的列表和详情是有对应关系（hero效果），但是列表页是随机排列的，如果要加载列表后再加载详情，就很难定位到文章在列表中的位置（随机推荐逻辑就很难改），而且还会影响性能。

解决方案我跟小伙伴思考了很久（基于vue-router），一开始我想的是通过路由守卫来控制，如果from来自列表，to就不跳转；如果from不是列表，则to跳转。但是这个方案会导致路由出现问题，因为如果没有跳转，则路由也不会变化。

另一个小伙伴想的是在路由表上，复用相同的组件，并使用keepAlive控制，来达到组件重用的目的。但是这个逻辑页有问题，keepAlive是路由的重用，其实不是组件的重用。

但当真正写起代码，才发现我们根本是想太多，其实解决方案简单到不足100行。

这里我采用vite来搭建项目，其实小红书这种网站需要考虑SEO的需求，应该会采用nuxt或者next等同构解决方案，这里我们简化了一下，只考虑路由的变化，所以也就不使用nuxt来搭建项目了。

routes.ts

import { RouteRecordRaw } from "vue-router";

export const routes: RouteRecordRaw[] = [

  {
path: "/",
redirect: '/home'

  },

  {
path: "/home",
name: "Home",
component: () => import("./Home.vue"),
children: [

      {
path: ':id',
name: "Detail",
component: () => import('./Detail.vue'),

      }

    ]

  },

]

router.ts

import {createRouter, createWebHistory} from "vue-router";
import { routes } from './routes.ts'
export const router = createRouter({
history: createWebHistory(),

  routes,

})

文件结构：

我习惯吧routes和router分开两个文件，一个专心做路由表的编辑，另一个就可以专门做路由器（router）和路由守卫的编辑。

代码结构其实很简单，为了缩减代码量，我直接把page组件跟router放在一起了。

简单解释一下：

routes.ts 文件中我写了三个路由，一个是根路由/,一个是列表/home，一个是详情页Detail，这里使用了一个相对路由:id的小技巧，待会你们就会知道为什么要这样了。

<template>
<div>
<div class="text-red-700">Homediv>
<div class="w-full flex flex-wrap gap-3">
<router-link v-for="item in dataList" :to="`/home/${item.id}`">
<img :src="item.url" alt="">
router-link>
div>
<el-dialog title="Detail" v-model="dialogVisible">
<router-view>router-view>
el-dialog>
div>
template>

<script setup lang="ts">
import {computed, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import axios from "axios";
import {randomSize} from "../utils/randomSize.ts";

const route = useRoute()
const router = useRouter()
const lastRoute = computed(() => route.matched[route.matched.length - 1])
const dialogVisible = computed({
get() {
return lastRoute.value.name == 'Detail'

  },
set(val) {
if (!val) {

      router.go(-1)

    }

  },

})

const dataList = ref([])
const loading = ref(false)
function getList() {

  loading.value = true
const data = localStorage.getItem('imageData')
if (!data) {

    axios.get('https://picsum.photos/v2/list')

        .then(({data}) => setDataList(data))

        .then(data => localStorage.setItem('imageData', JSON.stringify(data)))

        .finally(() => {

          loading.value = false

        })

  } else {
setDataList(JSON.parse(data))

  }

}
getList()

function setDataList(data) {

  dataList.value = data.map(item => ({

    id: item.url.split('/').pop(),

    url: randomSize(item.download_url)

  }))
return data

}
script>

这里重点看两个地方：

2. 为了控制弹窗的显隐，我定义了一个dialogVisible计算对象，他的get来自router.matched列表中最后一个路由（最终命中的路由）是否为Detail，如果为Detail，就true，否则为false；它的set我们只需要处理false的情况，当false的时候，路由回退1。（其实是用push/replace还是用go我是有点纠结的，但是我看到小红书这里是用的回退，所以我也就用回退了，虽然回退在这种使用场景中存在一定的隐患）