极客观点
项目管理
HarmonyOS
这段时间正在学习vue2x,在使用vue-router组件时遇到如下例子:
<!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: "#home_t",
data() {
return {
news: data
}
}
}
const content = {
template: "#content_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: "#app",
router: router
})
</script>
</html>遇到一个问题:
切换体育新闻和科技新闻的时候不能实时变化,需要点一下回到首页,才行.
我觉得是子组件 mounted()的问题,因为只挂载一次.我需要怎么修改代码,才能让点击实时生效了?
同一个路由之间切换，不会重新挂载的，你需要监听路由变化，做你想要的