<!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">
<ul>
<li>
<router-link to="/home">首页</router-link>
</li>
<li>
<router-link to="/news">新闻</router-link>
</li>
<li>
<router-link to="hot">热点</router-link>
</li>
</ul>
<router-view></router-view>
</div>
<!-- home组件模板 -->
<template id="home">
<div>
<h3>首页页面</h3>
</div>
</template>
<!-- news组件模板 -->
<template id="news">
<div>
<h3>新闻页面</h3>
<ul>
<li><router-link to="/news/0">新闻详情页1</router-link></li>
<li>
<router-link to="/news/1">新闻详情页2</router-link>
</li>
</ul>
</div>
</template>
<!-- hot组件模板 -->
<template id="hot">
<div>
<h3>热点页面</h3>
</div>
</template>
<!-- news二级路由(子路由)模板 -->
<template id="newsmsg">
<div>
<h3>新闻详情页1</h3>
<!-- $route.parpams.是固定写法。id是规范。代表如一级路由的地址是 /news/0，那么$route.params.id将等于0。若是/news/xx 那会等于xx -->
<p>这是参数：{{$route.params.id}}</p>
<!-- 显示二级路由内的data arr数组的内容,若后面有多个参数，直接$route.params.参数名即可，不需要追加前面头部分(这里的id) -->
<p>{{arr[$route.params.id]}}</p>
</div>
</template>
<script>
var Home=Vue.extend({template:"#home"});
var News=Vue.extend({template:"#news"});
var Hot=Vue.extend({template:"#hot"});
var NewsDatail=Vue.extend({
template:"#newsmsg",
/*每个组件都是一个新的Vue哦*/
data:function(){
return {arr:["吴师傅1","吴师傅2"]}
}
});
var routes=[
{
path:"/home",
component:Home
},
{
path:"/news",
component:News
},
{
path:"/hot",
component:Hot
},
{ //注意这里配置地址和组件模板对应，:是必须的。id是规范
path:"/news/:id",
component:NewsDatail
}
];
var router=new VueRouter({
routes:routes
});
var vm=new Vue({
el:"#box",
router:router
});
</script>
</body>
</html>一二级路由传参(router-link地址传参)
猜你喜欢
转载自blog.csdn.net/chijiajing/article/details/82890002
今日推荐
周排行