Vue.js Multiple independent routes
Description:
I am building a electron based Vue.js app with a settings icon that is always visible. Once the user clicks this icon, a settings modal will pop-up. This popup contains its own navigation / router-links.
Question:
Is it possible to only navigate a specific named router-view without actually navigating the main router-view
E.g. in Angular this would be done using the outlet prop:
path: 'settings-general',
outlet: 'settingsOutlet',
component: SettingsGeneralComponent
But in Vue all I could find was something like the snippet below, which navigates the main router-view to nothing
path: '/settings-general',
name: 'settings-general',
components: {
// default: This should just keep the current loaded component
settingsOutlet: require('@/components/SettingsGeneral').default
}
Below is my current Router config:
export default new Router({
routes: [
{
path: '/',
name: 'login-page',
component: require('@/components/LoginPage').default
},
{
path: '/home',
name: 'home-page',
component: require('@/components/HomePage').default
},
{
path: '/settings',
name: 'settings-page',
components: {
settingsRouter: require('@/components/SettingsPage').default
}
},
{
path: '*',
redirect: '/'
}
]
})
vuejs2 vue-router
edited Feb 12 at 15:58
Pierce O'Neill
331414
asked Nov 22 '18 at 22:49
TomTom
9219
add a comment |
Description:
I am building a electron based Vue.js app with a settings icon that is always visible. Once the user clicks this icon, a settings modal will pop-up. This popup contains its own navigation / router-links.
Question:
Is it possible to only navigate a specific named router-view without actually navigating the main router-view
E.g. in Angular this would be done using the outlet prop:
path: 'settings-general',
outlet: 'settingsOutlet',
component: SettingsGeneralComponent
But in Vue all I could find was something like the snippet below, which navigates the main router-view to nothing
path: '/settings-general',
name: 'settings-general',
components: {
// default: This should just keep the current loaded component
settingsOutlet: require('@/components/SettingsGeneral').default
}
Below is my current Router config:
export default new Router({
routes: [
{
path: '/',
name: 'login-page',
component: require('@/components/LoginPage').default
},
{
path: '/home',
name: 'home-page',
component: require('@/components/HomePage').default
},
{
path: '/settings',
name: 'settings-page',
components: {
settingsRouter: require('@/components/SettingsPage').default
}
},
{
path: '*',
redirect: '/'
}
]
})
vuejs2 vue-router
edited Feb 12 at 15:58
Pierce O'Neill
331414
asked Nov 22 '18 at 22:49
TomTom
9219
Yes it is possible. You should have the related to your markup router config.
– Piterden
Nov 22 '18 at 23:00
I´ve updated the question with my current router config. I haven´t included it since its not that much code, but anyways..
– Tom
Nov 23 '18 at 21:14
Not follow, sorry
– Piterden
Nov 24 '18 at 23:42
add a comment |
Description:
I am building a electron based Vue.js app with a settings icon that is always visible. Once the user clicks this icon, a settings modal will pop-up. This popup contains its own navigation / router-links.
Question:
Is it possible to only navigate a specific named router-view without actually navigating the main router-view
E.g. in Angular this would be done using the outlet prop:
path: 'settings-general',
outlet: 'settingsOutlet',
component: SettingsGeneralComponent
But in Vue all I could find was something like the snippet below, which navigates the main router-view to nothing
path: '/settings-general',
name: 'settings-general',
components: {
// default: This should just keep the current loaded component
settingsOutlet: require('@/components/SettingsGeneral').default
}
Below is my current Router config:
export default new Router({
routes: [
{
path: '/',
name: 'login-page',
component: require('@/components/LoginPage').default
},
{
path: '/home',
name: 'home-page',
component: require('@/components/HomePage').default
},
{
path: '/settings',
name: 'settings-page',
components: {
settingsRouter: require('@/components/SettingsPage').default
}
},
{
path: '*',
redirect: '/'
}
]
})
vuejs2 vue-router
edited Feb 12 at 15:58
Pierce O'Neill
331414
asked Nov 22 '18 at 22:49
TomTom
9219
Description:
I am building a electron based Vue.js app with a settings icon that is always visible. Once the user clicks this icon, a settings modal will pop-up. This popup contains its own navigation / router-links.
Question:
Is it possible to only navigate a specific named router-view without actually navigating the main router-view
E.g. in Angular this would be done using the outlet prop:
path: 'settings-general',
outlet: 'settingsOutlet',
component: SettingsGeneralComponent
But in Vue all I could find was something like the snippet below, which navigates the main router-view to nothing
path: '/settings-general',
name: 'settings-general',
components: {
// default: This should just keep the current loaded component
settingsOutlet: require('@/components/SettingsGeneral').default
}
Below is my current Router config:
export default new Router({
routes: [
{
path: '/',
name: 'login-page',
component: require('@/components/LoginPage').default
},
{
path: '/home',
name: 'home-page',
component: require('@/components/HomePage').default
},
{
path: '/settings',
name: 'settings-page',
components: {
settingsRouter: require('@/components/SettingsPage').default
}
},
{
path: '*',
redirect: '/'
}
]
})
vuejs2 vue-router
vuejs2 vue-router
edited Feb 12 at 15:58
Pierce O'Neill
331414
asked Nov 22 '18 at 22:49
TomTom
9219
edited Feb 12 at 15:58
Pierce O'Neill
331414
asked Nov 22 '18 at 22:49
TomTom
9219
edited Feb 12 at 15:58
Pierce O'Neill
331414
edited Feb 12 at 15:58
Pierce O'Neill
331414
edited Feb 12 at 15:58
Pierce O'Neill
331414
331414
asked Nov 22 '18 at 22:49
TomTom
9219
asked Nov 22 '18 at 22:49
TomTom
9219
asked Nov 22 '18 at 22:49
TomTom
9219
9219
Yes it is possible. You should have the related to your markup router config.
– Piterden
Nov 22 '18 at 23:00
I´ve updated the question with my current router config. I haven´t included it since its not that much code, but anyways..
– Tom
Nov 23 '18 at 21:14
Not follow, sorry
– Piterden
Nov 24 '18 at 23:42
add a comment |
Yes it is possible. You should have the related to your markup router config.
– Piterden
Nov 22 '18 at 23:00
I´ve updated the question with my current router config. I haven´t included it since its not that much code, but anyways..
– Tom
Nov 23 '18 at 21:14
Not follow, sorry
– Piterden
Nov 24 '18 at 23:42
Yes it is possible. You should have the related to your markup router config.
– Piterden
Nov 22 '18 at 23:00
Yes it is possible. You should have the related to your markup router config.
– Piterden
Nov 22 '18 at 23:00
I´ve updated the question with my current router config. I haven´t included it since its not that much code, but anyways..
– Tom
Nov 23 '18 at 21:14
I´ve updated the question with my current router config. I haven´t included it since its not that much code, but anyways..
– Tom
Nov 23 '18 at 21:14
Not follow, sorry
– Piterden
Nov 24 '18 at 23:42
Not follow, sorry
– Piterden
Nov 24 '18 at 23:42
add a comment |
0
active
oldest
votes
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%2f53438793%2fvue-js-multiple-independent-routes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53438793%2fvue-js-multiple-independent-routes%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
Yes it is possible. You should have the related to your markup router config.
– Piterden
Nov 22 '18 at 23:00
I´ve updated the question with my current router config. I haven´t included it since its not that much code, but anyways..
– Tom
Nov 23 '18 at 21:14
Not follow, sorry
– Piterden
Nov 24 '18 at 23:42