关于网友提出的“ (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