chore: vue-router-next api change

packages/vant-cli/site/desktop/App.vue

@@ -16,6 +16,7 @@
 import VanDoc from './components';
 import { config, packageVersion } from 'site-desktop-shared';
 import { setLang } from '../common/locales';
+import { scrollToAnchor } from './utils';
 
 export default {
   components: {
@@ -39,7 +40,7 @@ export default {
 
     langConfigs() {
       const { locales = {} } = config.site;
-      return Object.keys(locales).map(key => ({
+      return Object.keys(locales).map((key) => ({
         lang: key,
         label: locales[key].langLabel || '',
       }));
@@ -75,6 +76,12 @@ export default {
     this.setTitle();
   },
 
+  mounted() {
+    if (this.$route.hash) {
+      scrollToAnchor(this.$route.hash);
+    }
+  },
+
   methods: {
     setTitle() {
       let { title } = this.config;

packages/vant-cli/site/desktop/main.js

@@ -1,18 +1,5 @@
 import { createApp } from 'vue';
 import App from './App';
-import VueRouter from 'vue-router';
 import { router } from './router';
-import { scrollToAnchor } from './utils';
 
-const app = createApp({
-  el: '#app',
-  mounted() {
-    if (this.$route.hash) {
-      scrollToAnchor(this.$route.hash);
-    }
-  },
-  render: (h) => h(App),
-  router,
-});
-
-app.use(VueRouter);
+createApp(App).use(router).mount('#app');

packages/vant-cli/site/desktop/router.js

@@ -1,5 +1,5 @@
 import { nextTick } from 'vue';
-import VueRouter from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import { isMobile, decamelize } from '../common';
 import { config, documents } from 'site-desktop-shared';
 import { getLang, setDefaultLang } from '../common/locales';
@@ -98,8 +98,8 @@ function getRoutes() {
   return routes;
 }
 
-export const router = new VueRouter({
-  mode: 'hash',
+export const router = createRouter({
+  history: createWebHashHistory(),
   routes: getRoutes(),
   scrollBehavior(to) {
     if (to.hash) {

packages/vant-cli/site/mobile/main.js

@@ -1,5 +1,4 @@
 import { createApp } from 'vue';
-import VueRouter from 'vue-router';
 import DemoBlock from './components/DemoBlock';
 import DemoSection from './components/DemoSection';
 import { router } from './router';
@@ -7,13 +6,9 @@ import App from './App';
 import '@vant/touch-emulator';
 
 setTimeout(() => {
-  const app = createApp({
-    render: (h) => h(App),
-    router,
-  });
-
-  app.use(VueRouter);
-  app.component(DemoBlock.name, DemoBlock);
-  app.component(DemoSection.name, DemoSection);
-  app.mount('#app');
+  createApp(App)
+    .use(router)
+    .component(DemoBlock.name, DemoBlock)
+    .component(DemoSection.name, DemoSection)
+    .mount('#app');
 }, 0);

packages/vant-cli/site/mobile/router.js

@@ -1,5 +1,5 @@
 import { nextTick } from 'vue';
-import VueRouter from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import DemoHome from './components/DemoHome';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
@@ -81,8 +81,8 @@ function getRoutes() {
   return routes;
 }
 
-export const router = new VueRouter({
-  mode: 'hash',
+export const router = createRouter({
+  mode: createWebHashHistory(),
   routes: getRoutes(),
   scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 },
 });