hounour routes of a plugin in main or parent component app

[bitquality]

Version

3.3.2

Reproduction link

https://new-issue.vuejs.org/?repo=vuejs/vue-router

Steps to reproduce

I have developed a plugin and i am able to load it in my main app. And install method looks like below and following is its routes.

my plugin has one main component i am exporting as pplugin:

<template>

<div id="profile">
  <p>
    <router-link to="/profileinfo/updateEmail">updateEmail</router-link>
    <router-link to="/profileinfo/updatePassword">updatePassword</router-link>
   
  </p>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: 'ProfileInfoComponent ',
}
</script>

my plugin ProfileInfo has following router:

import ProfileInfoComponent from '.ProfileInfo.vue';

//components
const UpdateEmail = { template: `<div class="foo"><h1>foo</h1></div>` }
const UpdatePassword = { template: `<div class="bar"><h1>bar</h1></div>` }


const router= new VueRouter({
  mode:history,
  routes: {
   path: '/ProfileInfo', component: ProfileInfoComponent ,

 children:  [
    { path: '/updateEmail', component: UpdateEmail },
    { path: '/updatePassword', component: UpdatePassword  }
  ]
}
})

//lib.ts
import ProfileInfoComponent from '.ProfileInfo.vue';

const MyProfilePlugin= {
  install(Vue, options) {
        Vue.component('ProfileInfoComponent', ProfileInfoComponent)
  }
}

export default MyProfilePlugin;

What is expected?

When i register a plugin , i was expecting all its routes will act in main app without any issue.

In my main app's main.ts file:

import ProfileInfoPlugin from 'ProfileInfoPlugin';

Vue.use(ProfileInfoPlugin , { testmsg:'hello world'});

The following link has code which is exactly what my plugin code looks like.. And i am trying to achieve this behaviour in any app which uses it .

https://jsfiddle.net/yyx990803/L7hscd8h/

What is actually happening?

But my main app is not aware of my plguin's routes and it throws below error when i click on 'updateEmail' link from my main app ProfileInfo page where it used my ProfileInfoComponent:

[vue-router] Route with name 'UpdateEmail' does not exist

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

---

You need to add the router to the main Vue https://router.vuejs.org/guide/