一、重定向
1.1 修改 Main.vue
<template><div><el-container><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-caret-right"></i>用户管理</template><el-menu-item-group><el-menu-item index="1-1"><!--name 传组件名，params 传递参数，v-bind 进行对象绑定--><router-link v-bind:to="{name:'Profile222',params:{id:1}}">个人信息</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/user/list">用户列表</router-link></el-menu-item><!--用于测试重定向--><el-menu-item index="1-3"><router-link to="/goHome">回到首页</router-link></el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-caret-right"></i>内容管理</template><el-menu-item-group><el-menu-item index="2-1">分类管理</el-menu-item><el-menu-item index="2-2">内容列表</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><router-view/></el-main></el-container></el-container></div>
</template><script>
export default {name: "Main"
}
</script><style scoped lang="scss">
.el-header {background-color: yellow;color: blue;line-height: 60px;
}.el-aside {color: #333;
}
</style>
1.2 修改 router 路由
修改 router 文件夹下的 index.js，内容如下所示：
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'Vue.use(Router);export default new Router({routes:[{path:'/main',component:Main,// 配置嵌套路由children:[{path:'/user/list',component:List},{// 使用:id 进行参数接收path:'/user/profile/:id',name:'Profile222',component:Profile,props:true},{// 配置重定向信息path:'/goHome',redirect:'/main'}]},{path:'/Login',component:Login}]
})
1.3 测试
启动工程，如下所示：
在地址栏的后缀输入 main ，显示的内容如下所示，先点击个人信息，再点击回到首页，就可以发现地址栏发生了跳转。
二、显示当前登录的用户姓名
2.1 修改 Login.vue
<template><div><el-form ref="loginForm" :model="form" :rules="rules" label-width="8px" class="login-box"><h3 class="login-title">欢迎登录</h3><el-form-item label="账号" prop="username"><el-input type="text" placeholder="请输入账号" v-model="form.username"/></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" placeholder="请输入密码" v-model="form.password"/></el-form-item><el-form-item><el-button type="primary"v-on:click="onSubmit('loginForm')">登录</el-button></el-form-item></el-form><el-dialog title="温馨提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>请输入账号和密码</span><span slot="footer" class="dialog-footer"><el-button type="primary"@click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>
export default {name: "Login",data(){return {form:{username:'',password:''},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){// 传递当前用户输入的用户名参数this.$router.push("/main/"+this.form.username);}else{this.dialogVisible =true;return false;}});}}
}
</script><style lang="scss" scoped>
.login-box {border: 1px solid #DCDFE6;width: 350px;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;
}
.login-title{text-align: center;margin:0 auto 40px auto;color:#303133;
}
</style>
2.2 修改 router 路由
修改 router 文件夹下的 index.js，内容如下所示：
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'Vue.use(Router);export default new Router({routes:[{// 接收 login 传过来的参数path:'/main/:name',component:Main,// 允许接收参数props:true,// 配置嵌套路由children:[{path:'/user/list',component:List},{// 使用:id 进行参数接收path:'/user/profile/:id',name:'Profile222',component:Profile,props:true},{// 配置重定向信息path:'/goHome',redirect:'/main'}]},{path:'/Login',component:Login}]
})
2.3 修改 Main.vue
<template><div><el-container><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-caret-right"></i>用户管理</template><el-menu-item-group><el-menu-item index="1-1"><!--name 传组件名，params 传递参数，v-bind 进行对象绑定--><router-link v-bind:to="{name:'Profile222',params:{id:1}}">个人信息</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/user/list">用户列表</router-link></el-menu-item><!--用于测试重定向--><el-menu-item index="1-3"><router-link to="/goHome">回到首页</router-link></el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-caret-right"></i>内容管理</template><el-menu-item-group><el-menu-item index="2-1">分类管理</el-menu-item><el-menu-item index="2-2">内容列表</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown><!--显示当前的用户信息--><span>{{name}}</span></el-header><el-main><router-view/></el-main></el-container></el-container></div>
</template><script>
export default {// 接收 name 参数props:['name'],name: "Main"
}
</script><style scoped lang="scss">
.el-header {background-color: yellow;color: blue;line-height: 60px;
}.el-aside {color: #333;
}
</style>
2.4 测试
启动工程，网址后缀输入 login，并随便登录，如下所示：
三、路由模式与404
3.1 路由模式
路由默认分为两种，默认的是 hash
1、hash：路径带 # 符号，如：http://localhost/#/login
2、history：路径不带 # 符号，如：http://localhost/login
修改路由配置，代码如下：
export default new Router({mode:'history',routes:[]
});3.2 配置 404
如果用户访问的路径不存在怎么办？给他返回一个 404 即可，新建一个 NotFound.vue 的试图组件，内容如下所示：
<template><div>页面不存在，请重试！</div>
</template><script>
export default {name: "NotFound"
}
</script><style scoped></style>
配置路由信息 index.js 如下：
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'
// 导入组件
import NotFound from '../views/user/NotFound'Vue.use(Router);export default new Router({routes:[{path:'/main/:name',component:Main,props:true,// 配置嵌套路由children:[{path:'/user/list',component:List},{// 使用:id 进行参数接收path:'/user/profile/:id',name:'Profile222',component:Profile,props:true},{// 配置重定向信息path:'/goHome',redirect:'/main'}]},{path:'/Login',component:Login},// 做配置{path:'*',component:NotFound}]
})
测试：
四、路由钩子与异步请求
4.1 路由钩子
beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在进入路由后执行
export default {name: "Profile",// 进入路由前执行// 过滤器，从哪来，到哪去，下一步是什么beforeRouteEnter:(to,from,next)=>{console.log("进入路由之前");next();},// 进入路由后执行beforeRouteLeave:(to,from,next)=>{console.log("进入路由之后");next();},
}4.1.1 参数说明
to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() ：跳入下一个页面
next('/path') ：改变路由的跳转方向，使其跳到另一个路由
next(false) ：返回原来的页面
next(vm=>{}) ：仅在 beforeRouterEnter 中可用，vm是组件实例
4.2 在钩子函数中使用异步请求
4.2.1 安装 Axios
# cnpm 安装失败了就用 npm 安装，我也安装了好几次才启动成功了
cnpm install axios -snpm install axios -s4.2.2 在 main.js 中引用 Axios
import axios from 'axios'
import VueAxios from 'vue-axios'Vue.use(VueAxios,axios);
4.2.3 创建测试数据
在 static 目录下创建 mock 文件夹，并创建 data.json，内容如下所示：
{"name": "狂神说Java","url": "https://blog.kuangstudy.com","page": 1,"isNonProfit": true,"address": {"street": "含光门","city": "陕西西安","country": "中国"},"links": [{"name": "bilibili","url": "https://space,bilibili.com/95256449"},{"name": "狂伸说iava","ur1": "https://blog.kuangstudy.com"},{"name": "百度","url": "https://www.baidu.com/"}]
}
4.2.4 修改 Profile.vue
<template><!--所有的元素必须不能在根节点下，必须被div 包裹--><div><h1>个人信息</h1>
<!-- {{$route.params.id}}-->{{id}}</div></template><script>
export default {props: ['id'],name: "Profile",beforeRouteEnter:(to,from,next)=>{console.log("进入路由之前");next(vm =>{vm.getData();});},// 进入路由后执行beforeRouteLeave:(to,from,next)=>{console.log("进入路由之后");next();},methods:{getData:function(){this.axios({method:'get',url:'http://localhost:8080/static/mock/data.json',}).then(function (response){console.log(response)})}}
}
</script>
4.2.5 测试
