一二級路由傳參(router-link地址傳參)
阿新 • • 發佈：2018-12-12
<!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陣列的內容 --> <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>