返回当前登录用户名 路由模式 404 路由钩子与异步请求

在login.vue中 登录表单请求时传递个name属性 将用户名传递到 /main：

在methods中使用this获取data中的数据

this.$router.push("/main/"+this.from.username);

data(){
      return{
        form:{
          username:'',
          password:''
        },
        //表单验证，需要在 el-form-item 元素中增加prop属性
        rules: {
          username:[
            {required:true,message:"账号不可为空",trigger:"blur"}
          ],
          password:[
            {required:true,message:"密码不可为空",trigger:"blur"}
          ]
        },

        //对话框显示和隐藏
        dialogVisible:false
      }
    },

methods:{
      onSubmit(formName){
        //为表单绑定验证功能
        this.$refs[formName].validate((valid)=>{
          if(valid){
            //使用vue-router路由到指定界面，该方式称为编程式导航
            this.$router.push("/main/"+this.form.username);
          }else{
            this.dialogVisible=true;
            return false;
          }
        });
      }
    }

在index.js中接收参数：

path: '/main/:name',

并设置props: true, 传递参数到前端页面

import Vue from 'vue'
import Router from 'vue-router'

import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List"
import UserProfile from "../views/user/Profile"


Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main/:name',
      component: Main,
      props: true,
      //嵌套路由
      children: [
        {path: '/user/profile/:id',name: 'UserProfile',component: UserProfile,props: true},
        {path: '/user/list',component: UserList},
      ]
    },
    {
      path: '/login',
      component: Login
    },{
      path: '/goHome',
      redirect: '/main'
    }
  ]
});

在Main.vue中接收参数：

<script>
  export default {
    props: ['name'],
    name: "Main"
  };
</script>

然后在上面使用该参数：

<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
<span>{{name}}</span>

路由模式：
路由模式有两种

hash：路径带 # 符号，如 http://localhost/#/login
history：路径不带 # 符号，如 http://localhost/login

修改路由配置，代码如下：

export default new Router({
  mode: 'history',
  routes: [
  ··············
  ]
});

设置404 demo：
创建一个NotFound.vue视图组件：

<template>
    <div>
      <h1>404,你的页面走丢了</h1>
    </div>
</template>
<script>
    export default {
        name:## 标题 "NotFound"
    }
</script>
<style scoped>
</style>

然后将该组件配置到路由中：
index.js

import NotFound from "../views/NotFound";

{
      path: '*',
      component: NotFound
    }

路由钩子与异步请求

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

在Profile.vue中写：

 export default {
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }
  }

参数说明：

to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

在钩子函数中使用异步请求：
安装 Axios

cnpm install axios -s

main.js引用 Axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
数据和之前用的json数据一样 需要的去上述axios例子里

// 静态数据存放的位置
static/mock/data.json

在 beforeRouteEnter 中进行异步请求
Profile.vue：

  export default {
    //第二种取值方式
    // props:['id'],
    name: "UserProfile",
    //钩子函数 过滤器
    beforeRouteEnter: (to, from, next) => {
      //加载数据
      console.log("进入路由之前")
      next(vm => {
        //进入路由之前执行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("离开路由之前")
      next();
    },
    //axios
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }