vue-page-stack-router

vue-page-stack-router 是一个 Vue.js 的页面栈路由管理器，支持 Vue 2 和 Vue 3

功能特性

• 针对移动端 web 而设计
• 类似原生 APP 应用，小程序应用的导航体验，即前进刷新后退不刷新
• 保存滚动位置（默认为 true），在离开该页面时自动保存滚动位置，待返回后恢复保存的滚动位置

版本提示

你当前浏览的是 vue-page-stack-router 3.x 版本 的文档，适用于 Vue 3 开发。如果你在使用 Vue 2，请浏览 vue-page-stack-router@2 文档。

🔥 例子

• 线上案例，可查看 v-shop 商城

安装

# Vue 3 项目，安装
npm install vue-page-stack-router --save
# Vue 2 项目，安装
npm install vue-page-stack-router@2 --save

浏览器支持

vue-page-stack-router 3.x 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

使用

main.js

import { createApp } from 'vue';
import App from './App.vue';
import { router } from './router';
import { createPageStackRouter } from 'vue-page-stack-router';

// app
const app = createApp(App);

// pageStackRouter
const pageStackRouter = createPageStackRouter({ router });

app.use(router);
app.use(pageStackRouter);
app.mount('#app');

App.vue

<template>
  <div id="app">
    <PageStackRouterView />
  </div>
</template>

routes.js

import { createRouter, createWebHashHistory } from "vue-router";

export const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      name: "Home", // 与组件 name 保持一致
      component: () => import("@/views/home/index.vue"),
      meta: {
        title: "首页",
      },
    },
    {
      path: "/good/detail",
      name: "GoodDetail", // 与组件 name 保持一致
      component: () => import("@/views/good/detail.vue"),
      meta: {
        title: "商品详情",
      },
    },
  ],
});

API

VuePageStackRouter 插件参数说明：

| 参数 | 说明 | 类型 | 默认值 | | ------------------------- | ---------------------------- | --------- | ------ | | router | vue-router 实例 | object | - | | el | Vue 应用实例挂载容器元素 | string | '#app' | | max | 最多可以缓存多少页面组件实例 | number | 10 | | disableSaveScrollPosition | 禁用自动保存滚动位置 | boolean | false |

配置路由元信息（可选）

可以根据业务需要，自定义配置路由的 meta 字段：

{
  path: '/login',
  name: 'login',
  component: () => import('@/views/login/index.vue'),
  meta: {
    title: '登录',
    // `keepAlive`字段，是否参与页面栈导航。默认全部参与
    keepAlive: true,
    // `scrollingElement`字段，手动指定页面内滚动容器元素。默认查询全部
    scrollingElement: [".list-scroller", ".header-bd-radio-group"],
    // `disableSaveScrollPosition`字段，禁用自动保存滚动位置。默认为 `false`
    disableSaveScrollPosition: false,
  },
},

使用注意

1. 路由的name和组件的name都需要设置成一样，缓存才会生效。
2. 只支持一级路由，不支持嵌套路由。
3. 也可以去隔壁 v-shop qq群问