您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> Web开发 >> (vue.js)如何在vue2x手动启动vue-router2x?

(vue.js)如何在vue2x手动启动vue-router2x?

来源:网络整理     时间:2017/4/27 0:30:57     关键词:

关于网友提出的“ (vue.js)如何在vue2x手动启动vue-router2x?”问题疑问,本网通过在网上对“ (vue.js)如何在vue2x手动启动vue-router2x?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: (vue.js)如何在vue2x手动启动vue-router2x?
描述:

我知道vue2.x启动路由的方法改为了:

const app = new Vue({
    router,
    ...app
})

但是我想先做一些处理,再启动路由,有方法吗?

const app = new Vue({
    router,
    ...app
})

// 做一些处理
...

// 手动启动路由
app.whatToDo.toStartRouter

场景补充
路由首页->需要先发送一个ajax请求一个接口,获取到对应的标识位,这个请求是请求本地客户端的,然后由客户端向后端发送请求(因为加密的原因,只能这样走)->根据不同的标识尾,路由到不同的首页模板。

问题核心
当这个ajax请求失败的时候,需要弹出弹框提示用户,手动点击按钮,使用url scheme打开本地应用。但是,提示弹框整套逻辑都在App.vue上,所以我想先将App.vue挂在上去。


解决方案1:

可以看一下路由钩子,有一个beforeEach【钩子】

解决方案2:

谢邀

有个思路,vue-router 是 vue的插件,所以也有install 方法。
你可以这样

const router = new VueRouter({ .... })

const app = new Vue({
    ...app
})

// 做一些处理
...

// 手动启动路由
app.whatToDo.toStartRouter

router.install(app)

补充内容:
看了下源码,确实vue-router是以插件形式,安装到Vue里面的。
但是TAinstall函数中添加了router-view和router-link组件。并且,当VueRouter 组件创建后。router需要混入Vue对象中。以供render使用。

所以,在new Vue()的时候,如果没有基于VueRouter创建,使用或者就有问题。上面的思路有问题,因为没办法在组件都渲染了,再去注册组件。。

你可以修改下问题,表述下你为什么需要手动开启路由? 看看有没有其他途径策略解决。

附上源码中 ,install 函数实现。

var _Vue;

function install (Vue) { // vue-router 安装函数
  if (install.installed) { return }
  install.installed = true;

  _Vue = Vue;

  Object.defineProperty(Vue.prototype, '$router', {
    get: function get () { return this.$root._router }
  });

  Object.defineProperty(Vue.prototype, '$route', {
    get: function get () { return this.$root._route }
  });

  var isDef = function (v) { return v !== undefined; };

  var registerInstance = function (vm, callVal) {
    var i = vm.$options._parentVnode;
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal);
    }
  };

  Vue.mixin({
    beforeCreate: function beforeCreate () {
      if (isDef(this.$options.router)) {
        this._router = this.$options.router;
        this._router.init(this); // 基于当前对象,创建初始化router对象
        Vue.util.defineReactive(this, '_route', this._router.history.current);
      }
      registerInstance(this, this);
    },
    destroyed: function destroyed () {
      registerInstance(this);
    }
  });

  Vue.component('router-view', View); // 注册全局 router-view组件
  Vue.component('router-link', Link); // 注册全局 router-link组件

  var strats = Vue.config.optionMergeStrategies;
  // use the same hook merging strategy for route hooks
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.created;
}

以上介绍了“ (vue.js)如何在vue2x手动启动vue-router2x?”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/4290385.html

相关图片

相关文章