Vue之路由切换

1、切换路由的两种方式：

首先要存储token:

  window.localStorage.setItem("token",data.data.token);

（1）通过path:

this.$router.push({
                      path:'/about',
                      query:{
                         name:this.ruleForm.username
                      }
                    });

(2)通过name:

//通过name切换路由,类似于post,保护数据
                    this.$router.push({
                      name:'About',
                      params:{
                         name:this.ruleForm.username
                      }
                    });

2、完整代码：

（1）将router装到Vue实列里面：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
//导入api
import api from './api/index.js'
//在Vue的原型上添加Axios 这样每个VUE实例都可以使用$axios
Vue.prototype.$api=api;
//Vue.prototype.$axios=axios 有了api，axios就不会直接调用了

Vue.use(ElementUI);//use 不是install
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)  //reader 把一段html代码片段渲染到挂载点上
}).$mount('#app')

（2）路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Login_',
    component: Login
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path:'/login',
    name:'Login',
    component:Login
  },
  {
    path:'/home',
    name:'Home',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

export default router

(3)准备跳转：

<template>
   <div>
      <el-card class="box-card">
         <div slot="header" class="clearfix">
             <span>用户登录</span>
          </div>

          <div >
             <el-form :model="ruleForm"  label-width="100px" class="demo-ruleForm">
                 <el-form-item label="用户名" prop="pass">
                   <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
                 </el-form-item>

                 <el-form-item label="密码" prop="pass">
                     <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                 </el-form-item>

                 <el-form-item>
                     <el-button type="primary" @click="login">提交</el-button>
                     <el-button >重置</el-button>
                </el-form-item>
             </el-form>
          </div>
       </el-card>
    </div>
</template>

<script>
export default {
    data(){
      return{
         ruleForm:{
           username:" ",
           password:" "
         }
      }
    },
    methods:{
        login:function(){
          //var _this=this;使用箭头函数可以直接使用this
          /* _this.$axios({
                      method:"post",
                      url:"http://123.57.7.108:1024/emall/login",
                      data:{
                          username:this.ruleForm.username,
                          password:this.ruleForm.password
                      }
                  }).then(function(response){
                       if(response.data.code=="200"){
                          window.localStorage.setItem("token",response.data.data.token);//永久存储令牌
                          _this.$message({
                               message: '登录成功',
                               type: 'info'
                                 });
                        }else{
                                 _this.$message({
                                   showClose: true,
                                    message: '用户名或者密码错误',
                                    type: 'warning'
                               });
                          }
                  }).catch(function(error){
                       _this.$alert(error);
                  });*/
                  //改写axios
            //data就是从数据接口中获取数据对象
          this.$api.__api_login( this.ruleForm).then(data=>{
                    this.$message({
                      message:'登录成功哦',
                      type:'info'
                    });

                    //存储token
                    window.localStorage.setItem("token",data.data.token);
                    //跳转页面即切换路由
                   /* this.$router.push({
                      path:'/about',
                      query:{
                         name:this.ruleForm.username
                      }
                    });*/
      
                    //通过name切换路由,类似于post,保护数据
                    this.$router.push({
                      name:'About',
                      params:{
                         name:this.ruleForm.username
                      }
                    });
          }).catch(error=>{
                     this.$message({
                      message:'我是catch,登录失败',
                      type:'info'
                    });
          });
        }
    }
}
</script>

<style >
        .box-card{
          width: 500px;
        }
</style>