六、安装router实现页面跳转

1、安装router

npm install vue-router

2、使用

import VueRouter from 'vue-router'

Vue.use(VueRouter)

3， js 中配置路由
首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。如：{path:’/home’, component: home}
我们这里有两条路由，组成一个routes:

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。

const router = new VueRouter({
      routes // routes: routes 的简写
})

配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了

const app = new Vue({
  router
}).$mount('#app')

4、编辑App.vue

5、编辑main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import axios from 'axios'
import VueRouter from 'vue-router'

Vue.use(ElementUI)
Vue.use(VueRouter)

Vue.prototype.$axios= axios
Vue.config.productionTip = false

// 引入组件
import Login from './components/Login/login'
import Home from './components/Home/home'
import Register from './components/Login/register'

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/register', component: Register }
]

const router = new VueRouter({
    mode: 'history',
    routes: routes 
})

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

6、更改login register组件的跳转

login.vue组件

    
        注册
    

  alert("登陆成功！");
  this.$router.push('/')

register.vue组件

    登陆

method里面的submitPost方法
submitPost(){
    this.$axios.post('http://localhost:3000/user',{
         user:this.ruleForm.user,
          pass:this.ruleForm.pass,
    })
    .then(function (response) {
        alert("注册成功！请登录");
        this.$router.push('/login');
        console.log(response.data)
    }.bind(this))
    .catch(function (error) {
        alert("注册失败！");
    });
}