三、Vue菜鳥小教程-巢狀路由、二級路由示例
阿新 • • 發佈：2019-02-19
首先寫這篇文章之前先宣告一下，這篇文章是在空餘時間寫出來的，後期還會再往裡面新增東西或者改動的，如果有哪裡不對也歡迎指出。
在學習過程中我都是先閱讀一遍官方文件，然後看例子學的，因為個人覺得在做的過程中學習知識是比較快的。下面就遇到了這個問題，$route.parame.id是什麼意思呢，在網上查了好多文件，瞭解到這些東西。下面先看一下程式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>巢狀路由</title> <script src="vue.js" type="text/javascript"></script> <script src="vue-router.js" type="text/javascript"></script> <!--首先引入vue和vue-router.js--> <style type="text/css"> *{padding: 0px;margin: 0px;} li{list-style: none;float: left;margin: 10px 20px;} a{text-decoration: none;} a:hover{cursor: pointer;} .show{width: 300px;height: 300px;background: #ccc;float: left;margin: 20px 0px;} .clear{clear: both;} </style> </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='/personal'>個人中心</router-link></li> <div class="clear"></div> </ul> <div class="show"> <router-view></router-view> </div> </div> <template id="home"> <div> <h2>首頁內容</h2> </div> </template> <template id="news"> <div> <h2>新聞內容</h2> <p><router-link to="/news/0">詳細內容一</router-link></p> <p><router-link to="/news/1">詳細內容二</router-link></p> <p><router-link to="/news/2">詳細內容三</router-link></p> </div> </template> <template id="personal"> <div> <h2>個人中心</h2> </div> </template> <template id="detailist"> <div> <h2>詳細內容</h2> {{$route.params.id}} {{arr[$route.params.id]}}</div> </template> </body> </html> <!--準備模組--> <script type="text/javascript"> var Home = Vue.extend({ template : '#home', }); var News = Vue.extend({ template : '#news', }); var Personal = Vue.extend({ template : '#personal', }); var Detailist = Vue.extend({ template : '#detailist', data : function () { return{ arr:[ '我是娛樂新聞','我是科技新聞','我是經濟新聞' ] } }, }); // 分配路徑 var routes = [ {path:'/home',component:Home}, {path:'/news',component:News}, {path:'/news/:id',component:Detailist}, {path:'/personal',component:Personal} ]; // 分配路徑 var router = new VueRouter({ routes }); var app = new Vue({ el :"#box", data :{}, router, }) router.push('/home') </script>
二級路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<style type="text/css">
li {list-style-type: none; display: inline-block;}
.show {width: 400px; height: 300px; background: #eee;}
</style>
</head>
<body>
<div id="box">
<ul>
<li><router-link to='/home'>home</router-link></li>
<li><router-link to='/news'>news</router-link></li>
</ul>
<div class="show">
<router-view></router-view>
</div>
</div>
<template id='h'>
<div>
<h2>首頁</h2>
</div>
</template>
<template id='n'>
<div>
<p>新聞列表</p>
<p><router-link to='/news/today'>今日頭條</router-link></p>
<p><router-link to='/news/star'>娛樂八卦(關愛八卦成長協會)</router-link></p>
<p><router-link to='/news/tiyu'>體育新聞</router-link></p>
<router-view></router-view>
</div>
</template>
</body>
</html>
<script type="text/javascript">
// 準備模組
var Home = Vue.extend({
template: '#h'
});
var NewsList = Vue.extend({
template: '#n'
});
// 配置路徑
var routes = [
{path:'/home', component:Home},
{path:'/news', component:NewsList,
children: [
// 二級路由路徑,不加/
{path:'today', component:{
template: '<p>就憑你的胸,你今天也該過節</p>'
}},
{path:'star', component:{
template: '<p>某某小鮮肉和某某小花又約會了</p>'
}},
{path:'tiyu', component:{
template: '<p>中國足球居然贏了</p>'
}},
]