vue-router@4 example #172

FranckFreiburger · 2024-01-08T20:32:26Z

FranckFreiburger
Jan 8, 2024
Maintainer

<html>
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/vue@3.4.6/dist/vue.runtime.global.prod.js"></script>
  <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.prod.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.js"></script>
  <script>

    /* <!-- */
    const config = {
      files: {
        '/app.vue': `
          <template>
            <div>
              <div><router-link to="/foo">go to /foo</router-link></div>
              <div><router-link to="/bar">go to /bar</router-link></div>
              <router-view/>
            </div>
          </template>
       `,
       '/foo.vue': `
        <template>
          <div>
            foo route
            <div>got to <router-link to="/">root</router-link></div>
          </div>
        </template>
       `,
       '/bar.vue': `
        <template>
          <div>
            bar route
            <div>got to <router-link to="/">root</router-link></div>
          </div>
        </template>
       `,
      }
    };
    /* --> */
    
    const options = {
      moduleCache: { vue: Vue, 'vue-router': VueRouter },
      getFile: url => config.files[url],
      addStyle: () => {},
      log: (...args) => console.log(...args),
    }
    
    function load(path) {
      
      return window['vue3-sfc-loader'].loadModule(path, options);
    }

    const app = Vue.createApp(Vue.defineAsyncComponent(() => load('/app.vue')))

    const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      routes: [
        { path: '/foo', component: () => load('/foo.vue') },
        { path: '/bar', component: () => load('/bar.vue') },
      ]
    })

    app.use(router);
    app.mount(document.body);
      
  </script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vue-router@4 example #172

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

vue-router@4 example #172

FranckFreiburger Jan 8, 2024 Maintainer

Replies: 0 comments

FranckFreiburger
Jan 8, 2024
Maintainer