Vue - Routing to a subcomponent within a component

Question

In Vue, I've got a component named Container. It is composed of two components ComponentA and ComponentB. Here is the code for the Vue app Https:/codesandbox.io/s/p5po0jz47

How can a router be configured to navigate to ComponentB on ComponentA?

I dont think you can configure the router to do that, but you can always use this.$router.push({ name: 'your componentB route' }) — Constantin Chirila
– Constantin Chirila, Commented Feb 6, 2019 at 10:34
Is there a way then to navigate to a section of a page? In the way you'd use # for non SPA applications? — user3213700
– user3213700, Commented Feb 6, 2019 at 10:57

Len Joseph · Accepted Answer · 2019-02-07 17:14:14Z

1

I had a similar challenge. The way I handled it was registering both components within the container, using the <component></component> tag in the container template, and using Vuex to manage the current <component is=""> value.

So Component A may have a button to transition to Component B, which would then trigger a Vuex mutation that updates a Vuex state object like {currentComponent: ""}, then a Vuex getter would feed the <component is=""> binding in the container component. There are easier ways to do this, I'm sure, but in my use case I wanted the selection persisted.

edited Feb 7, 2019 at 17:14

answered Feb 6, 2019 at 14:33

Len Joseph

1,46812 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue - Routing to a subcomponent within a component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related