Trouble importing router #74
-
|
I would like to use vue-router with the vue-sfc-loader but I cannot get it to work. The sfc-loader is working great. My components all work but I have no idea how (or where) to add the router. Any example available for how to include router? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
vue-router works properly with vue3-sfc-loader. Here an example for vue2 : <!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue2-sfc-loader.js"></script>
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.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 },
getFile: url => config.files[url],
addStyle: () => {},
}
function load(path) {
return window['vue2-sfc-loader'].loadModule(path, options);
}
Vue.use(VueRouter);
load('/app.vue')
.then(app => {
const router = new VueRouter({
//mode: 'history',
mode: 'hash',
routes: [
{ path: '/foo', component: () => load('/foo.vue') },
{ path: '/bar', component: () => load('/bar.vue') },
]
})
new Vue({ ...app, router }).$mount('#app')
});
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Oh super, Thank you very much.
…On Sat, 5 Jun 2021, 17:23 Franck Freiburger, ***@***.***> wrote:
vue-router works properly with vue3-sfc-loader. Here an example for vue2 :
<!DOCTYPE html><html><body>
<div id="app"></div>
<script ***@***.***/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue2-sfc-loader.js"></script>
<script ***@***.***/dist/vue-router.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 },
getFile: url => config.files[url],
addStyle: () => {},
}
function load(path) {
return window['vue2-sfc-loader'].loadModule(path, options);
}
Vue.use(VueRouter);
load('/app.vue')
.then(app => {
const router = new VueRouter({
//mode: 'history',
mode: 'hash',
routes: [
{ path: '/foo', component: () => load('/foo.vue') },
{ path: '/bar', component: () => load('/bar.vue') },
]
})
new Vue({ ...app, router }).$mount('#app')
});
</script></body></html>
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#74 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AABV363WBHJG5ZHMLVCON7LTRI6PPANCNFSM454RXA3A>
.
|
Beta Was this translation helpful? Give feedback.
-
|
So how do you load it in vue3? |
Beta Was this translation helpful? Give feedback.
-
|
Ooooh, I think I found what I was doing wrong. I should use <script src="https://unpkg.com/vue-router@4"></script>for vue3. now VueRouter is defined and I can add it in options. |
Beta Was this translation helpful? Give feedback.
-
|
Do you have a running example of an SFC, @tinus, that uses Router@4 and otherwise hosted by vue3-sfc-loader? |
Beta Was this translation helpful? Give feedback.
-
No I am sorry we have moved back to just using plain JavaScript. |
Beta Was this translation helpful? Give feedback.
vue-router works properly with vue3-sfc-loader. Here an example for vue2 :