vue-router 路由 iframe巢狀
阿新 • • 發佈：2019-01-30
功能點：
使用vue-router.js 實現路由功能，簡單路由引數設定。
在iframe裡展示自定義連結內容（url地址或者載入路由地址）測試。
監聽屬性變化功能。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--<script src="../vue.js"></script>--> <!--<script src="../bower_components/vue-router/dist/vue-router.min.js"></script>--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <style> * { margin:0;padding:0;color:#333; } body { margin:0 50px; } a { text-decoration: none; cursor: pointer;color:#fff} .router-link-active { color:#0c13e6; } .nav { background-color: #e45ea273; width: 100%; height: 60px; line-height: 60px; font-size: 20px; } ul { list-style: none; margin: 0 30px; } li { float: left; margin:0 20px; } </style> </head> <body> <div id="box"> <div class="nav"> <ul> <li> <router-link to="/home">主頁</router-link> </li> <li> <router-link to="/news">新聞</router-link> </li> <li> <router-link to="/myiframe/urlPath?src=https://www.baidu.com/s?wd=abc">Myiframe_URL</router-link> </li> <li> <router-link to="/myiframe/home">Myiframe_主頁</router-link> </li> <li> <router-link to="/myiframe/news">Myiframe_新聞</router-link> </li> </ul> </div> <div> <!--渲染匹配的元件--> <router-view></router-view> </div> </div> <template id="home"> <div> <h3>我是主頁</h3> </div> </template> <template id="news"> <div> <div> <h3>我是新聞</h3> <router-link to="/news/details/10010?t=1">使用者詳細</router-link> <router-link to="/news/name/lucy/age/20">使用者名稱稱</router-link> <router-link to="/news/ret">首頁</router-link> </div> <div> <router-view></router-view> </div> </div> </template> <template id="details"> <div> <h3>我是使用者詳細</h3> <h3>當前完整路徑fullPath:{{$route.fullPath}}</h3> <h3>當前路徑path:{{$route.path}}</h3> <h3>當前引數params:{{$route.params}}</h3> <h3>當前查詢引數query:{{$route.query}}</h3> <h3>hash:{{$route.hash}}</h3> <h3>router:{{$route.router}}</h3> <!--<h3>matched:{{$route.matched}}</h3>--> </div> </template> <template id="myiframe"> <div> <h3>urlPath : {{urlPath}}</h3> <h3>routerPath : {{routerPath}}</h3> <h3>src : {{$route.query.src}}</h3> <iframe v-if="$route.query.src" :src='$route.query.src' frameborder="0" width="900px" height="500px"></iframe> <iframe v-else :src="urlPath" frameborder="0" width="900px" height="500px"></iframe> <!--<iframe :src="'//elemefe.github.io/mint-ui/#'" frameborder="0" width="300px" height="300px"></iframe>--> </div> </template> <script> var Home = { template:"#home" } var News = { template:"#news" } var Details = { template:"#details" } var Myiframe = { template:"#myiframe" ,data: function() { return { msg:"" ,urlPath: this.getUrlPath() //iframe src 路徑 } } ,props:['routerPath'] // 路由地址 ,watch: { routerPath: function(val) {// 監聽routerPath變化，改變src路徑 this.urlPath = this.getUrlPath(); } } ,methods: { getUrlPath:function() {//獲取 iframe src 路徑 let url = window.location.href; url = url.replace("myiframe/",""); return url; } } } const routes = [ {path:"/home",component:Home}, { path:"/news", component:News, children:[ //實際使用中可以懶載入方式={path:"index",component: resolve => require(['./index.vue'], resolve) }, {path:"details/:id",component:Details}, {path:"name/:name/age/:age",component:{template:"<h3>{{$route.params}}</h3>"}}, {path:"ret",redirect:'/home'} ] }, {path:"/myiframe/:routerPath",component:Myiframe,props: true},//props:true 必須 {path:"*",redirect:"/home"} //{path:"*",component:Home} ]; const router=new VueRouter({ routes }); var app = new Vue({ router, el:'#box', data:{ } }); </script> </body> </html>