路由的路徑為什么發(fā)生疊加？

在使用vue路由的時候，在兩個入口文件中分別設(shè)置路由，引入到html文件中，如下

<div id="app">

<p>
   <router-link to='/home'>首頁</router-link>
   <router-link to='/pageone'>page1</router-link>
</p>
<router-view></router-view>
</div>
<div id="one">

 <p>
    <router-link to='user/one'>one</router-link>
    <router-link to='user/two'>two</router-link>
 </p>
 <router-view></router-view>
</div>

兩個js文件如下：

文件1：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './vue/home.vue'
import Pageone from './vue/pageone.vue'
Vue.use(VueRouter);
const routes=[
    {path:'/home',component:Home},
    {path:'/pageone',component:Pageone}
];
const router=new VueRouter({routes})
const app=new Vue({
    router
}).$mount('#app')

文件2：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './vue/home.vue'
import Pageone from './vue/pageone.vue'
Vue.use(VueRouter)
const One={
    template:'<div>user {{$route.params.id}}</div>'
}
const router=new VueRouter({
    routes:[
       {path:'/user/:id',component:One}
    ]
})
const one=new Vue({
 router
}).$mount('#one')

在瀏覽器中可見，只有id為app內(nèi)的路由可以正常實現(xiàn)，但是在id為one中路由第一次點擊可以正常顯示，但是之后再點擊就會發(fā)現(xiàn)路徑會疊加，無法正確展示

正常顯示

路徑疊加，沒有正常顯示，，如何可以正確顯示呢？