路由
目录
2.多级路由
3.路由传参
一.路由
<router-link to="/home">Home</router-link>:类似于a标签，用于跳转到某个组件；
<router-view></router-view>:进行占位：组件显示的区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.0/vue-router.min.js"></script>
<style>
.ul1{
}
.ul1 li{
display: inline-block;
padding: 20px
}
.div2{
border: 1px solid #cccccc;
height: 400px;
width: 400px;
margin: 20px 40px;
}
</style>
</head>
<body>
<div id="box">
<ul style="list-style: none;" class="ul1">
<li>
<router-link to="/home">Home</router-link>
</li>
<li>
<router-link to="/news">News</router-link>
</li>
<li>
<router-link to="/hot">Hot</router-link>
</li>
</ul>
<div class="div2"><router-view></router-view></div>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{},
router:new VueRouter({
routes:[
{path:"/home",component:({
template:"<h2>首页</h2>"
})},
{path:"/news",component:({
template:"<h2>新闻</h2>"
})},
{path:"/hot",component:({
template:"<h2>热点</h2>"
})}
]
})
})
</script>
</body>
</html>改良后的路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.0/vue-router.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li>
<router-link to="/home">Home</router-link>
</li>
<li>
<router-link to="/news">News</router-link>
</li>
<li>
<router-link to="/hot">Hot</router-link>
</li>
</ul>
<div><router-view></router-view></div>
</div>
<template id="home">
<div>
<p>娱乐头条</p>
<p>经济新闻</p>
</div>
</template>
<template id="news">
<div>
<p>刘德华落马</p>
<p>2022年冬奥运</p>
</div>
</template>
<template id="hot">
<div>
<p>钓鱼岛事件爆发</p>
<p>打扁日本人</p>
</div>
</template>
<script>
//定义组件
var Home=Vue.extend({
template:"#home"
});
var News=Vue.extend({
template:"#news"
});
var Hot=Vue.extend({
template:"#hot"
});
//配置信息
var routes=[
{path:"/home",component:Home},
{path:"/news",component:News},
{path:"/hot",component:Hot}
];
//创建路由对象
var router=new VueRouter({
routes:routes
});
var vm=new Vue({
el:"#box",
data:{},
router
})
</script>
</body>
</html>二.二级路由
二级路由：其实就是相当于两层跳转标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.0/vue-router.min.js"></script>
</head>
<body>
<div id="box">
<div><router-view></router-view></div>
<p>
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/hot">热点</router-link>
</p>
</div>
<template id="home">
<div>
<p>美国与中国再次大战,美国惨败,输得一无所有</p>
<P>日本发生特大地震,整个日本岛将面临塌陷</P>
</div>
</template>
<template id="news">
<div>
<h3>电影/视剧</h3>
<p>
<router-link to="/news/film">电影</router-link>
<router-link to="/news/tv">视剧</router-link>
</p>
<router-view></router-view>
</div>
</template>
<template id="hot">
<div>
<p>北京冬奥会将在2020年举行</p>
<P>下一届亚运会将在杭州举行</P>
</div>
</template>
<script>
var Home=Vue.extend({
template:"#home"
});
var News=Vue.extend({
template:"#news"
});
var Hot=Vue.extend({
template:"#hot"
});
var routes=[
{path:"/home",component:Home},
{path:"/news",component:News,children:[
{path:"film",component:{
template:"<p>电影:绣春刀，战狼2</p>"
}},
{path:"tv",component:{
template:"<p>视剧:生于70年代，春风十里不如你</p>"
}}
]},
{path:"/hot",component:Hot},
];
var router=new VueRouter({
routes:routes
});
var vm=new Vue({
el:"#box",
beforeCreate:function(){
this.$router.push("/home")
},
router
})
</script>
</body>
</html>三.路由传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.0/vue-router.min.js"></script>
</head>
<body>
<div id="box">
<div><router-view></router-view></div>
<p>
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/hot">热点</router-link>
</p>
</div>
<template id="home">
<div>
<h3>首页内容</h3>
<ul>
<li><router-link to="/home/0">首页1</router-link></li>
<li><router-link to="/home/1">首页2</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<template id="home1">
<div>
<span></span>
<span>{{arr[$route.params.id]}}</span>
</div>
</template>
<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>
<router-view></router-view>
</div>
</template>
<template id="news1">
<div>
<span></span>
//
<span>{{arr[$route.params.id]}}</span>
</div>
</template>
<template id="hot">
<div>
<h3>热点内容</h3>
<ul>
<li><router-link to="/hot/0">热点1</router-link></li>
<li><router-link to="/hot/1">热点2</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<template id="hot1">
<div>
<span></span>
//该数组下标所对应的内容
<span>{{arr[$route.params.id]}}</span>
</div>
</template>
<script>
var Home=Vue.extend({
template:"#home"
});
var HomeDetail=Vue.extend({
template:"#home1",
data:function(){
return{
arr:["富士康股票大涨","美元贬值"]
}
}
});
var News=Vue.extend({
template:"#news"
});
var NewsDetail=Vue.extend({
template:"#news1",
data:function(){
return{
arr:["中国建国79周年","国庆建军彰显国家为威严"]
}
}
});
var Hot=Vue.extend({
template:"#hot"
});
var HotDetail=Vue.extend({
template:"#hot1",
data:function(){
return{
arr:["美国与伊拉克大战，美国战败","美元贬值侧略"]
}
}
});
var routes=[
{path:"/home",component:Home},
{path:"/home/:id",component:HomeDetail},
{path:"/news",component:News},
{path:"/news/:id",component:NewsDetail},
{path:"/hot",component:Hot},
{path:"/hot/:id",component:HotDetail}
];
var router=new VueRouter({
routes:routes
});
var vm=new Vue({
el:"#box",
router
})
</script>
</body>
</html>