vue.js - vue路由里面如何传值？我传递的值为什么找不到list?为什么传递的data接受不到？
本文介绍了vue.js - vue路由里面如何传值？我传递的值为什么找不到list?为什么传递的data接受不到？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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实例
const News={
template:"#xin",
data() {
return {
list1:["a","b"]
}
}
}这篇关于vue.js - vue路由里面如何传值？我传递的值为什么找不到list?为什么传递的data接受不到？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
