路由（一級路由，多級路由，路由傳參）
阿新 • • 發佈：2018-11-10
路由
目錄
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>