I built two components in the conponent directory: a.vue b.vue
a.vue:
< template >
< div class= "a" >
{{ msg }}
<a href="/b">b.vue</a> < / div >
< / template >
export default {
name: "asides,
data () {
return {
msg: "Welcome to a.vue"
}}
}
b.vue:
< template >
< div class= "hello" >
{{ msg }}
<a href="/">a.vue</a> < / div >
< / template >
< script >
export default {
name: "baked,
data () {
return {
msg: "Welcome to b.vue"
}}
}
Route Settings:
import Vue from "vue"
import Router from" vue-router"
import a from"@ / components/a"
import b from"@ / components/b"
Vue.use (Router)
export default new Router ({
routes: [
{
path: "/",
name: "a",
component: a
},
{
path: "/b",
name: "b",
component: b
}]
})
at first, you can jump to the page to switch content, but I don"t know why. No matter how you click the jump link, although the URL path has changed, the content displayed on the page always remains the same, but the content of a.vue is still displayed
.