路由传参
2017-12-18 本文已影响0人
css7
<div id="app">
<span>
<router-link to="/home">home</router-link>
</span>
<span>
<router-link to="/news">news</router-link>
</span>
<router-view></router-view>
</div>
<template id="home">
<div>home</div>
</template>
<template id="news">
<div>
<!-- news进入详情页面,并且传入当前被点击新闻的id -->
<ul>
<li>
<router-link to="/news/0">新闻1</router-link>
</li>
<li>
<router-link to="/news/1">新闻2</router-link>
</li>
<li>
<router-link to="/news/2">新闻3</router-link>
</li>
<li>
<router-link to="/news/3">新闻4</router-link>
</li>
</ul>
</div>
</template>
<template id="detail">
<div>
<h1>新闻详情</h1>
<div>接收过来的新闻:{{newsArr[$route.params.id].con}}</div>
<!-- $route接收参数,在template中接收 -->
</div>
</template>
<script>
var Home = Vue.extend({
template: '#home'
});
var News = Vue.extend({
template: '#news'
})
var Detail = Vue.extend({
'template': '#detail',
data: function () {
return {
newsArr: [{
id: 001,
con: '新闻1'
},
{
id: 002,
con: '新闻2'
},
{
id: 003,
con: '新闻3'
},
{
id: 004,
con: '新闻4'
}
]
}
}
});
var arr = [{
path: '/home',
component: Home
},
{
path: '/news',
component: News
},
{
path: '/news/:id',
component: Detail
}
];
var router = new VueRouter({
routes: arr
});
var vm = new Vue({
'el': '#app',
router,
beforeCreate:function(){
this.$router.push('/');
}
});
</script>