路由的路径为什么发生叠加？

Question

在使用vue路由的时候，在两个入口文件中分别设置路由，引入到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内的路由可以正常实现，但是在id为one中路由第一次点击可以正常显示，但是之后再点击就会发现路径会叠加，无法正确展示

正常显示

路径叠加，没有正常显示，，如何可以正确显示呢？

Answer 1

是因为html中id为one的路径 to属性写错了，应该写成/user/one 注意前面要加/ 要细心啊