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

【问题标题】：How to use vue-router-next without bundler?如何在没有捆绑器的情况下使用 vue-router-next？
【发布时间】：2020-12-30 17:30:44
【问题描述】：

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

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

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

【问题讨论】：

标签： vue.js vuejs2 vue-router vuejs3

【解决方案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

【讨论】：