while learning, vue2x, encounters the following examples when using vue-router components:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<!-- -->
<script type="text/x-template" id="content_t">
<div>
<div>{{field.content}}</div>
<router-link to="/"></router-link>
</div>
</script>
<script type="text/x-template" id="home_t">
<div>
<li v-for="(v,k) in news">
<router-link :to="{name:"content_as",params:{id:v.id,index:k}}">{{v.title}}</router-link>
</li>
<router-view></router-view>
</div>
</script>
<script>
var data = [
{ id: 1, title: "", content: "nba......" },
{ id: 2, title: "", content: "......" }
]
const home = {
template: "-sharphome_t",
data() {
return {
news: data
}
}
}
const content = {
template: "-sharpcontent_t",
data() {
return {
field: {}
}
},
mounted() {
var index = this.$route.params.index;
this.field = data[index];
}
}
const routeConf = [
{
path: "/", component: home, name: "home_as", children: [
{ path: "/content/:id", component: content, name: "content_as" }
]
}
]
let router = new VueRouter({
routes: routeConf
})
var vm = new Vue({
el: "-sharpapp",
router: router
})
</script>
</html>encountered a problem:
when switching between sports news and technology news, you can"t change it in real time. You need to click back to the home page.
I think it"s the sub-component mounted (), because it"s only mounted once. How do I modify the code to make the click take effect in real time?