Mixing
how to automatically map path to component
Vue 2.5, vuex3, vue cli 3
I am trying to define the routes in vue, do i have to specify component for each path, let's say I have 50 components, then I have to define path for all these 50 component, e.g. path aaa - component aaa, path bbb - component bbb, path ccc - component ccc.? with all the path same as the component name, then I ended up having a long list of the route definition?
can I just define the route with some sort of wildcard, so it can try to automatically find the component based on the path, assuming the path name is same as component name? to make it simple, assuming I have only 1 level, all the 50 components are in component folder, with the name same as the path. how can I avoid to have to define for each route?
vue-router
asked Nov 20 '18 at 1:58
ZhongminZhongmin
4881624
add a comment |
Vue 2.5, vuex3, vue cli 3
I am trying to define the routes in vue, do i have to specify component for each path, let's say I have 50 components, then I have to define path for all these 50 component, e.g. path aaa - component aaa, path bbb - component bbb, path ccc - component ccc.? with all the path same as the component name, then I ended up having a long list of the route definition?
can I just define the route with some sort of wildcard, so it can try to automatically find the component based on the path, assuming the path name is same as component name? to make it simple, assuming I have only 1 level, all the 50 components are in component folder, with the name same as the path. how can I avoid to have to define for each route?
vue-router
asked Nov 20 '18 at 1:58
ZhongminZhongmin
4881624
This is a very interesting question. I'd like to know if this is possible too.
– Christhofer Natalius
Nov 21 '18 at 3:40
add a comment |
Vue 2.5, vuex3, vue cli 3
I am trying to define the routes in vue, do i have to specify component for each path, let's say I have 50 components, then I have to define path for all these 50 component, e.g. path aaa - component aaa, path bbb - component bbb, path ccc - component ccc.? with all the path same as the component name, then I ended up having a long list of the route definition?
can I just define the route with some sort of wildcard, so it can try to automatically find the component based on the path, assuming the path name is same as component name? to make it simple, assuming I have only 1 level, all the 50 components are in component folder, with the name same as the path. how can I avoid to have to define for each route?
vue-router
asked Nov 20 '18 at 1:58
ZhongminZhongmin
4881624
Vue 2.5, vuex3, vue cli 3
I am trying to define the routes in vue, do i have to specify component for each path, let's say I have 50 components, then I have to define path for all these 50 component, e.g. path aaa - component aaa, path bbb - component bbb, path ccc - component ccc.? with all the path same as the component name, then I ended up having a long list of the route definition?
can I just define the route with some sort of wildcard, so it can try to automatically find the component based on the path, assuming the path name is same as component name? to make it simple, assuming I have only 1 level, all the 50 components are in component folder, with the name same as the path. how can I avoid to have to define for each route?
vue-router
vue-router
asked Nov 20 '18 at 1:58
ZhongminZhongmin
4881624
asked Nov 20 '18 at 1:58
ZhongminZhongmin
4881624
edited Nov 20 '18 at 6:08
Zhongmin
asked Nov 20 '18 at 1:58
ZhongminZhongmin
4881624
asked Nov 20 '18 at 1:58
ZhongminZhongmin
4881624
asked Nov 20 '18 at 1:58
ZhongminZhongmin
4881624
4881624
This is a very interesting question. I'd like to know if this is possible too.
– Christhofer Natalius
Nov 21 '18 at 3:40
add a comment |
This is a very interesting question. I'd like to know if this is possible too.
– Christhofer Natalius
Nov 21 '18 at 3:40
This is a very interesting question. I'd like to know if this is possible too.
– Christhofer Natalius
Nov 21 '18 at 3:40
This is a very interesting question. I'd like to know if this is possible too.
– Christhofer Natalius
Nov 21 '18 at 3:40
add a comment |
1 Answer
1
active
oldest
votes
You can dynamically get a component via a component factory.
For example, this can be your router.js module:
import Vue from 'vue';
import Router from 'vue-router';
import ViewFactory from '@/ViewFactory';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '**', // wildcard route
name: 'view-factory',
component: ViewFactory
}
]
});
And this is the ViewFactory:
<template>
<div>
<component :is="component" />
</div>
</template>
<script>
import { mapState } from 'vuex'
import Default from '@/components/Default';
import aaa from '@/components/aaa';
import bbb from '@/components/bbb';
import bbb from '@/components/ccc';
export default {
components: {
Default,
aaa,
bbb,
ccc
},
computed: {
component () {
// Get last path part, equals component name
let component = this.$route.path.split('/').slice(-1);
// Fallback component
if (Object.keys(this.$options.components).indexOf(component) === -1) {
component = 'Default';
}
// Return component name
return component;
}
}
}
</script>
When this.$route.path changes and you need to reload data, don't forget to watch the path and call a reload method after that in ViewFactory:
watch: {
// call again the method if the route changes
'$route': 'load'
},
More information on this topic:
https://flaviocopes.com/vue-dynamically-show-components/
https://vuejs.org/v2/api/#is
answered Nov 27 '18 at 22:04
thetthet
47547
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385163%2fhow-to-automatically-map-path-to-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can dynamically get a component via a component factory.
For example, this can be your router.js module:
import Vue from 'vue';
import Router from 'vue-router';
import ViewFactory from '@/ViewFactory';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '**', // wildcard route
name: 'view-factory',
component: ViewFactory
}
]
});
And this is the ViewFactory:
<template>
<div>
<component :is="component" />
</div>
</template>
<script>
import { mapState } from 'vuex'
import Default from '@/components/Default';
import aaa from '@/components/aaa';
import bbb from '@/components/bbb';
import bbb from '@/components/ccc';
export default {
components: {
Default,
aaa,
bbb,
ccc
},
computed: {
component () {
// Get last path part, equals component name
let component = this.$route.path.split('/').slice(-1);
// Fallback component
if (Object.keys(this.$options.components).indexOf(component) === -1) {
component = 'Default';
}
// Return component name
return component;
}
}
}
</script>
When this.$route.path changes and you need to reload data, don't forget to watch the path and call a reload method after that in ViewFactory:
watch: {
// call again the method if the route changes
'$route': 'load'
},
More information on this topic:
https://flaviocopes.com/vue-dynamically-show-components/
https://vuejs.org/v2/api/#is
answered Nov 27 '18 at 22:04
thetthet
47547
add a comment |
You can dynamically get a component via a component factory.
For example, this can be your router.js module:
import Vue from 'vue';
import Router from 'vue-router';
import ViewFactory from '@/ViewFactory';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '**', // wildcard route
name: 'view-factory',
component: ViewFactory
}
]
});
And this is the ViewFactory:
<template>
<div>
<component :is="component" />
</div>
</template>
<script>
import { mapState } from 'vuex'
import Default from '@/components/Default';
import aaa from '@/components/aaa';
import bbb from '@/components/bbb';
import bbb from '@/components/ccc';
export default {
components: {
Default,
aaa,
bbb,
ccc
},
computed: {
component () {
// Get last path part, equals component name
let component = this.$route.path.split('/').slice(-1);
// Fallback component
if (Object.keys(this.$options.components).indexOf(component) === -1) {
component = 'Default';
}
// Return component name
return component;
}
}
}
</script>
When this.$route.path changes and you need to reload data, don't forget to watch the path and call a reload method after that in ViewFactory:
watch: {
// call again the method if the route changes
'$route': 'load'
},
More information on this topic:
https://flaviocopes.com/vue-dynamically-show-components/
https://vuejs.org/v2/api/#is
answered Nov 27 '18 at 22:04
thetthet
47547
add a comment |
You can dynamically get a component via a component factory.
For example, this can be your router.js module:
import Vue from 'vue';
import Router from 'vue-router';
import ViewFactory from '@/ViewFactory';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '**', // wildcard route
name: 'view-factory',
component: ViewFactory
}
]
});
And this is the ViewFactory:
<template>
<div>
<component :is="component" />
</div>
</template>
<script>
import { mapState } from 'vuex'
import Default from '@/components/Default';
import aaa from '@/components/aaa';
import bbb from '@/components/bbb';
import bbb from '@/components/ccc';
export default {
components: {
Default,
aaa,
bbb,
ccc
},
computed: {
component () {
// Get last path part, equals component name
let component = this.$route.path.split('/').slice(-1);
// Fallback component
if (Object.keys(this.$options.components).indexOf(component) === -1) {
component = 'Default';
}
// Return component name
return component;
}
}
}
</script>
When this.$route.path changes and you need to reload data, don't forget to watch the path and call a reload method after that in ViewFactory:
watch: {
// call again the method if the route changes
'$route': 'load'
},
More information on this topic:
https://flaviocopes.com/vue-dynamically-show-components/
https://vuejs.org/v2/api/#is
answered Nov 27 '18 at 22:04
thetthet
47547
You can dynamically get a component via a component factory.
For example, this can be your router.js module:
import Vue from 'vue';
import Router from 'vue-router';
import ViewFactory from '@/ViewFactory';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '**', // wildcard route
name: 'view-factory',
component: ViewFactory
}
]
});
And this is the ViewFactory:
<template>
<div>
<component :is="component" />
</div>
</template>
<script>
import { mapState } from 'vuex'
import Default from '@/components/Default';
import aaa from '@/components/aaa';
import bbb from '@/components/bbb';
import bbb from '@/components/ccc';
export default {
components: {
Default,
aaa,
bbb,
ccc
},
computed: {
component () {
// Get last path part, equals component name
let component = this.$route.path.split('/').slice(-1);
// Fallback component
if (Object.keys(this.$options.components).indexOf(component) === -1) {
component = 'Default';
}
// Return component name
return component;
}
}
}
</script>
When this.$route.path changes and you need to reload data, don't forget to watch the path and call a reload method after that in ViewFactory:
watch: {
// call again the method if the route changes
'$route': 'load'
},
More information on this topic:
https://flaviocopes.com/vue-dynamically-show-components/
https://vuejs.org/v2/api/#is
answered Nov 27 '18 at 22:04
thetthet
47547
edited Nov 27 '18 at 22:13
answered Nov 27 '18 at 22:04
thetthet
47547
answered Nov 27 '18 at 22:04
thetthet
47547
answered Nov 27 '18 at 22:04
thetthet
47547
47547
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385163%2fhow-to-automatically-map-path-to-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This is a very interesting question. I'd like to know if this is possible too.
– Christhofer Natalius
Nov 21 '18 at 3:40