vue.js路由中怎么用iframe
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js路由中怎么用iframe相关的知识，希望对你有一定的参考价值。
参考技术A <!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用指令 v-link 进行导航。 -->
<a v-link=" path: '/foo' ">Go to Foo</a>
<a v-link=" path: '/bar' ">Go to Bar</a>
</p>
<!-- 路由外链 -->
<router-view></router-view>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script>
<script src="http://cdn.bootcss.com/vue-router/0.7.13/vue-router.min.js"></script>
<script type="text/javascript">
'use strict';
Vue.use(VueRouter)
// 定义组件
var Foo = Vue.extend(
props: ['src'],
template: '<iframe :src="src"></iframe>',
route:
data: function (transition)
this.src = 'https://cn.bing.com/search?q=' + transition.to.path
)
// 路由器需要一个根组件。
// 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
var App = Vue.extend()
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
var router = new VueRouter()
// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数，也可以是一个组件选项对象。
// 稍后我们会讲解嵌套路由
router.map(
'/foo':
component: Foo
,
'/bar':
component: Foo
)
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app')
</script>
</body>
</html>
每次更新路由时调用一个函数 vue.js
【中文标题】每次更新路由时调用一个函数 vue.js【英文标题】：call a function every time a route is updated vue.js 【发布时间】：2018-01-18 01:09:40 【问题描述】：我在我的应用程序中集成了对讲机，每次我的网址更改时我都需要致电window.Intercom('update');。
我知道我可以将它添加到mounted()，但我宁愿不修改我的所有组件，而是直接使用navigation guards 来完成。 （主要是为了避免在 10 个不同的地方有相同的代码。
目前我有：
router.afterEach((to, from) =>
eventHub.$off(); // I use this for an other things, here is not important
console.log(window.location.href ) // this prints the previous url
window.Intercom('update'); // which means that this also uses the previous url
)
这在更改 url 之前运行 intercom('update')，而我需要在 url 更改后运行它。
是否有一个钩子在 url 更改时运行？ 我该怎么做？
谢谢
【问题讨论】：
您可以在Vue 实例中尝试 watching the $route object。
@thanksd 我说它还没有改变，因为在第 3 行 console.log(window.location.href ) 打印了以前的 url。例如从家里我点击 /about，它打印 home，然后我点击 /team 它打印 /about 等
@Phil 你的意思是在我的基础组件中添加一个观察者？这可以工作.. 我通常会尽量避免观察者，但在这里它可能是有意义的
为什么不给 App.vue 添加一个挂载的钩子。所有其他组件都是 App.vue 的子组件
@KamgaSimoJunior @Phil watch 工作得很好。谢谢。
【参考方案1】：
不确定这是否会起作用，因为您已经拥有的似乎应该没问题，但是这里...
尝试watching the $route object 进行更改
new Vue(
// ...
watch:
'$route': function(to, from)
Intercom('update')
)
【讨论】：
参数的顺序应该to, from，否则正是我要找的。span>
@Jonas 他们只是名字，但你是对的，论点应该颠倒过来。将修复
对我来说，观看`'$route'` 没有检测到变化，但$route 检测到了。我的意思是我必须删除引号。
@YeasirArafatMajumder 根本不应该有任何区别【参考方案2】：
我刚刚想出了除菲尔之外的另一个解决方案，您也可以使用Global Mixin。它将其方法或生命周期挂钩合并到每个组件中。
Vue.mixin(
mounted()
// do what you need
)
【讨论】：
我建议不要使用此解决方案。如果您使用每个路由一个组件的简单实现，这可能会起作用，但是使用此方法，mounted() 事件将附加到每个组件，因此如果您在路由中有一个或多个子组件，该事件将运行一次他们每个人。这可能会导致您的应用程序出现意外和无法控制的行为。以上是关于vue.js路由中怎么用iframe的主要内容，如果未能解决你的问题，请参考以下文章
(vue.js)Vue element tab 每个tab用一个路由来管理？