一、重定向
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 -s
npm 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 测试
![[保研/考研机试] KY187 二进制数 北京邮电大学复试上机题 C++实现](https://img-blog.csdnimg.cn/2ba7c4a470d3470eac0849d5ede4a2df.png)
