vue+express,路由跳转不了(例如注册完成后，跳转到登录页面)，如下图代码

Question

前端页面点击注册，可以在mongodb中插入集合，所以注册是没有问题的，但是我希望注册成功之后，前端注册页面可以跳转到login登录页面

前端

router/index (路由)

import Vue from 'vue'
import Router from 'vue-router'
// import Hello from '@/components/Hello'
import List from '../views/list'
import Detail from '../views/detail'
import Add from '../views/add'
import Update from '../views/update'
import Login from '../views/login'
import Register from '../views/register'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'List',
      component: List
    },
    {
      path: '/detail',
      name: 'Detail',
      component: Detail
    },
    {
      path: '/add',
      name: 'Add',
      component: Add
    },
    {
      path: '/detail',
      name: 'Datail',
      component: Detail
    },
    {
      path: '/update',
      name: 'Update',
      component: Update
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    }

  ]
})

register.vue(注册页面)

<template lang="html">
  <div class="">
    <h1>注册页面</h1>
    账号: <input type="text" v-model="username"><br>
    密码: <input type="text" v-model="password"><br>
    <input type="submit" @click="register" value="确定">
    <p>已有账号，去<router-link to="/login">登录</router-link> </p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      username: '',
      password: ''
    }
  },
  methods: {
    register(){
      this.$http.post('/api/register', {
        userName: this.username,
        passWord: this.password
      }).then((res) => {
        console.log(res.data);
        this.$router.push({
          path: '/login'
        });
        // window.location.href = "http://localhost:8080"
      })
    }
  }
}
</script>

### login.vue(登录页面)
<template lang="html">
  <div class="">
    <h1>登录页面</h1>
    账号: <input type="text" v-model="username"><br>
    密码: <input type="text" v-model="password"><br>
    <input type="submit" name="" @click="login" value="确定"><br>
    <p>还没有账号，去<router-link to="/register">注册</router-link> </p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      username: '',
      password: ''
    }
  },
  methods: {
    login(){
      this.$http.post('/api/login', {
        userName: this.username,
        passWord: this.password
      }).then((res) => {
        console.log(res.data);
        this.$router.push({
          path: '/login'
        });
      })
    }
  }
}
</script>

后台

router/register.js(后台注册路由)

var express = require('express');
var router = express.Router();
var Model = require('../data/module')

/* GET home page. */


router.post('/register', function(req, res, next){
  var userName = req.body.userName;
  var passWord = req.body.passWord;
  var newData = {
    username: userName,
    password: passWord
  }
  Model.User.create(newData, function(err, doc){
    if(err){
      console.log(err);
      return;
    }else{
      console.log(doc);
      res.redirect('/login');
    }
  })
})

module.exports = router;

login.js(后台登录路由)

代理

    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    },

Answer 1

这种路由跳转无非就只有两种做法，一种是前端路由一种是后端路由，我选择用前端进行跳转，不过我没有用代理转发，我不知道你的注册功能是不是已经实现了，如果数据库显示插入成功但是没有跳转的话说明后端已经成功相应，那这样问题就集中在了路由这个点上，我先贴上我的代码，就是前端跳转的做法

            submitForm(formName) {
                var formData = this.ruleForm;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post('/reg',formData).then((param)=> {
                            // success callback
                            if (param.data.status == 1) {
                                this.$message.warning(param.data.msg);
                            }else if(param.data.status == 0){
                                localStorage.setItem('ms_username',this.ruleForm.name); //通过localStorage传递username
                                this.$router.push({path: '/index', replace: true});
                            }
                        }, response => {
                            // error callback
                            this.$message.error('遇到了不可预知的错误');
                        });
                    } else {
                        // alert('error submit!!');
                    }
                });

我在项目中使用了elementUI,所以忽略一下括号中带的参数，那是框架自带的一些方法属性看，我直接向后端接口reg传递了一个表格数据，然后带一个返回参数param用于接收后端传递回来的值，我通过判断后端传递回来的状态码决定是否要进行路由的跳转，当状态码为0时表示可以跳转，用h5中的localStorage传递username，然后push直接跳转即可
下面是后台代码

module.exports.reg = {
    post:function(req,res,next){
        // res.send('注册成功')
        var postRegData = {
            name:req.body.name,
            pwd:req.body.pwd
        };
        var regJson = {
            status:'',
            msg:''
        }
        ModelUser.findOne({
            name:req.body.name
        },function(err,data){
            if (err) {
                console.log(err)
            }
            if (data) {
                regJson.msg = '此用户已被注册';
                regJson.status = '1';
                res.send(regJson)
            }else{
                ModelUser.create(postRegData,function(err,data){    //create函数为添加信息
                    if (err) {
                        console.log(err);
                    };                        
                    req.session.user = data;     //把用户信息存放在session中，data中即为注册成功的用户信息
                    regJson.status = '0';
                    res.send(regJson)
                });
            }
        })
    }
};

首先在后台接口开始处声明一个json数据，里面放置状态码和信息，当判断成功注册时则通过res.send向前台返回这个json数据，并且在前台使用原先设定好的参数param进行读取即可

如果是后台做法，我认为你的问题可能出在代理转发上，我认为后台接口在接收和跳转时也要把api前缀加上，因为没有用过这个做法，而且使用中跨域问题已经得到了解决，我就没有尝试过代理转发，不过你可以试一试

具体代码可以参考我的个人博客 https://github.com/daLingZhon...

Answer 2

如果你的项目是前后端分离的，而且你已经是一个单页应用了，那么你的视图层应该是和后端完全没有关系的，也就是说你的后端并不能控制你前端页面的路由跳转，在注册成功之后，后端应该返回一个状态（你现在的接口应该是没有返回的，所以应该是进不去then里面），前端根据状态来控制路由的跳转