Vue-router + iframe 实现后台当前页面刷新

前言

常见的两列布局,之前笔者用的 frameset 做,一个页面上有三个 frame(左,右,头部),体验很不好,因为部分代码使用了 Vue ,所以结合 Vue-router 来实现路由,其中也用到了一点点 Vue 自定义组件的内容.当然读者也可以选择其他更轻量级的路由库.

结合Vue-router

基础使用在官网上有更详细的介绍http://router.vuejs.org/,不再赘述,

这里我们要将 path 路径的值传递给我们的自定义组件(其实就是被我们包裹的 iframe)

定义 iframe 组件 frameCompent,这里用 :src 来绑定 iframe 的 url 地址,因为我们要将路径传递给组件, $route.path得到的就是这个路径的字符串形式,注意在 Vue 中这个 $route.path 可以用模板内的表达式进行操作,例如 split,reverse

const frameCompent = { template: <iframe> :src="$route.path" style="xxx">' }

定义 routes 对象,使用’/:xx/:xxx’ 形式的path,iframe 的 url 即为 /xx/xxx

var routes = [
          { path: '/:menu/:select', component: frameCompent },
      ]

创建 router 对象

var router = new VueRouter({
          routes:routes
      })

将 router 挂载到 Vue 对象上

const app = new Vue({
  router
}).$mount('#app')