Question

我不是一个前端开发人员，但我知道足够的javascript来做到最低限度。

我试图插入最后一段登录，但我的vue组件是：

"vue-resource": "^0.9.3",
"vue-router": "^0.7.13"

我没有足够的经验分别向上移动到v1或v2。我想实现与this类似的东西。

但是我没有成功重定向。

我的app.js文件：

var router = new VueRouter();
...
import Auth from './services/auth.js';

router.beforeEach(transition => {
    if(transition.to.auth &&!Auth.authenticated)
    {
        transition.redirect('/login');
    }
    else
    {
        transition.next();
    }
});
```
In my login.js file
```
methods: {
            /**
             * Login the user
             */
            login(e) {

                e.preventDefault();

                this.form.startProcessing();

                var vm = this;

                this.$http.post('/api/authenticate',
                    {   email                   :   this.form.email,
                        password                :   this.form.password
                    })
                    .then(function(response){
                                vm.form.finishProcessing();
                                localStorage.setItem('token', response.data.token);
                                vm.$dispatch('authenticateUser');
                            },
                            function(response) {
                                if(response.status == 401)
                                {
                                    let error = {'password': ['Email/Password do not match']};
                                    vm.form.setErrors(error);
                                }else{
                                    vm.form.setErrors(response.data);
                                }
                            });
            }
        }

我尝试按照建议做的事情：

vm.form.finishProcessing();
   localStorage.setItem('token', response.data.token);
   vm.$dispatch('authenticateUser');
   vm.$route.router.go('/dashboard');

然而，它所做的只是将网址添加到顶部。我看到之前的3个事件已经成功完成，但没有重定向。

它来自： http://dev.homestead.app:8000/login#!/ 至 http://dev.homestead.app:8000/login#!/dashboard

当我需要整个页面去： http://dev.homestead.app:8000/login/dashboard#1/

我认为我缺少正确的重定向概念。

更新

根据建议，我添加了param: append => false但没有任何反应。

我之后做的是在app.js内创建一个名为redirectLogin（）的方法，带有console.log（）输出 - 这很有效。我进一步做的是将vm.$route.router.go放在那里并通过vm.$dispatch('redirectLogin');调用该方法，这也没有用。

注意：

首先在Laravel中呈现HTML。我最初拥有（和工作）路线作为登录/仪表板，该路线可通过普通的Laravel路线获得。刀片通过视图模板呈现。

到目前为止，我一直在尝试重定向到登录/信息中心（不工作）或许我应该以某种方式删除login/dashboard并使用route.map并分配login/dashboard？

由于身份验证和其他操作，我宁愿将login/dashboard保留为laravel路由。

Answer 1

Vue 2

f = open('res.tex', 'w') f.write(results.summary().as_latex()) f.close() f = open('res1.tex', 'w') f.write(res2.summary().as_latex()) f.close()

Answer 2

与documentation相同，router.go会在当前路线中追加路径，但在您的情况下，它也会与路由器中的#一起追加。

您可以使用param：append直接到达您想要的目的地，如下所示：

vm.$route.router.go({name: '/login/dashboard#1/', params: {append: false}})

被修改

如果没有发生，您可以尝试以下$window.location方法：

var url = "http://" + $window.location.host + "login/dashboard";
console..log(url);
$window.location.href = url;

Answer 3

我认为他们对vue-router的运作方式存在误解。您似乎不想加载具有相应组件的新路由，而只是想要重定向到新页面，然后让该页面加载，然后启动一个新的vue实例。

如果上述情况正确，则根本不需要vue-router。只需在您需要加载页面时添加以下内容：

window.location.href = '/login/dashboard'

如果您想模拟重定向到该页面（没有后退按钮历史记录），那么：

window.location.replace('/login/dashboard')

修改

当您完成页面必须运行的所有处理以设置下一页所需的用户状态时，将触发上述操作。通过这种方式，下一页可以抓取它并且应该能够告诉用户的正确状态（登录）。

因此，当Promise解决后，您将要激活重定向：

.then(function(response){ vm.form.finishProcessing() // store the Auth token localStorage.setItem('token', response.data.token) // not sure whether this is required as this page, and in turn this instance of vue, is about to be redirected vm.$dispatch('authenticateUser') // redirect the user to their dashboard where I assume you'd run this.$dispatch('authenticateUser') again to get their state window.location.replace('/login/dashboard')

从Vue.js中的方法重定向，Vue-router早于版本1.x.x.

3 个答案:

被修改