when using vue routing, set the route in the two entry files and introduce it into the html file, as follows
<div id="app">
<router-link to="/home"></router-link>
<router-link to="/pageone">page1</router-link>
<router-view></router-view>
</div>
<div id="one">
<router-link to="user/one">one</router-link>
<router-link to="user/two">two</router-link>
<router-view></router-view>
</div>
the two js files are as follows:
File 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("-sharpapp")
File 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("-sharpone")
can be seen in the browser. Only the route within id is app can be implemented normally, but when id is one, the route can be displayed normally on the first click, but then you will find that the path will be superimposed and cannot be displayed correctly
path overlay, no normal display, how can it be displayed correctly?