极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Router</title>
<script src="dist/vue.min.js"></script>
<script src="dist/vue-router.min.js"></script></head>
<body>
<div id="box">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻页</router-link>
<router-view></router-view>
</div>
<template id="xin">
<div>
<h3>新闻页面内容</h3>
<ul>
<li v-for="(val,index) in list1" :key="index">{{val}}</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
</template></body>
<script>
const Home={
template:"<h3>首页<h3>"
}
const News={
template:"#xin"
}
const routes=[{
path:"/home",
component:Home
},
{
path:"/news",
component:News
}
]
const router=new VueRouter({
routes
})
new Vue({
el:"#box",
data:{
list1:["a","b"]
},
router:router,
})
</script></html>
你这个list1是在组件News中，所以data需要定义到News组件里，而不是根Vue实例