如何在没有捆绑器的情况下使用 vue-router-next？

Question

上一版本vue-router使用全局应用实例，自动挂载插件：

if (inBrowser && window.Vue) {
  window.Vue.use(VueRouter);
}

现在这种可能性在 Vue 3 版本中被限制了。那么，如果我在 vue-router-next 中使用 CDN 而不是捆绑器，我应该如何让 VueRouter 传递给 app.use(VueRouter)？

Answer 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@next"></script>

    <div id="app">
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/foo">Foo</router-link></li>
        <li><router-link to="/bar">Bar</router-link></li>
      </ul>
      <router-view></router-view>
    </div>

    <script>
      const { createRouter, createWebHistory, createWebHashHistory } = VueRouter
      const { createApp } = Vue

      const Home = {
        template: `<div>home</div>`,
      }

      const Foo = { template: '<div>foo</div>' }
      const Bar = { template: '<div>bar</div>' }

      const router = createRouter({
        history: createWebHistory(),
        routes: [
          { path: '/', component: Home },
          { path: '/foo', component: Foo },
          { path: '/bar', component: Bar },
        ],
      })

      const app = createApp({})
      app.use(router)

      window.vm = app.mount('#app')
    </script>
  </body>
</html>

感谢posva

如何在没有捆绑器的情况下使用 vue-router-next？

How to use vue-router-next without bundler?

vue.js

vue-router

vuejs2

vuejs3