<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
<router-view></router-view>
</div>
<!-- 父类模板 -->
<template id="parent">
<div>
<p>
<span>
<router-link to="/home/user foo/home">/user/foo</router-link>
</span>
<span>
<router-link to="/home/user foo/profile">/user/foo/profile</router-link>
</span>
<span>
<router-link to="/home/user foo/posts">/user/foo/posts</router-link>
</span>
</p>
</div>
</template>
<template id=homeone>
<div>
<h2>{{$route.params.id}}</h2>
<p>{{$route.params.name}}</p>
</div>
</template>
<script type="text/javascript">
var HomeOne=Vue.extend({template:"#homeone"});
var routes=[
{
path:"/home/:id/:name",
component:HomeOne
}
];
var router=new VueRouter({
routes
});
var vm=new Vue({
el:"#box",
components:{
"parent":{
template:"#parent"
}
},
router:router
});
</script>
</body>
</html>路由传参demo
猜你喜欢
转载自blog.csdn.net/chijiajing/article/details/82893916
今日推荐
周排行