路由嵌套
我们这里模拟一下什么叫做路由跳转,我们建立两个vue组件,用来负责我们的用户信息。
我们需要进入主页面,然后通过点击链接,来实现跳转。
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">
<router-link to="/user/profile">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/user/list">用户列表</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>
<e1-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</e1-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 >
.el-header {
backdrop-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
我们这里写我们的主页面,通过进入我们的主页面,点击再显示我们的组件。
我们将我们的嵌套路由写入我们的Main页面下面,以children
这个属性来作为它的子路由。
{
path: '/main',
component: Main,// 嵌套路由
children: [
{
path: '/user/profile',
component: UserProfile
},
{
path: '/user/list',
component: UserList
}
]
},
我们可以在进入main之后,再通过嵌套路由来进行控制跳转。
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
注意:导入的名字要和路由跳转的名字一致。
这样只有进入main页面之后,通过点击即可显示出来。
参数传递以及重定向
我们在做完用户列表之后,我们需要考虑一个问题,每个用户的用户信息都是不一样的,我们需要根据不同的用户来展示用户不同的信息,这时候就需要参数的传递,例如用户名和密码。
通过parms传递参数
怎么做呢?
<router-link to="{name: 'UserProfile',params:{id: 1}}">个人信息</router-link>
我们需要修改我们的参数,附带一个params属性,这个value后面可以通过json来进行传递。
同时修改路由:
然后就可以拿到我们的参数了
这里有一个需要记住的点,所有的元素,一定不能在根节点下面,用div套起来。
通过props传递参数(推荐)
第二种方式,通过props来传递参数
我们修改我们的路由,把同意使用props来传递参数设置为true。
接着在导入时,把id接收进来,直接展示即可。
重定向
我们使用redirect属性即可
然后我们在前端配置跳转即可。
404和路由钩子
路由模式有两种
- hash:路径带# 符号。如
http://localhost/#/login
- history:路径不带#符号。如
http://localhost/login
修改路由配置即可:
export default new Router({
mode: 'history',
routes:[
{
path: '/main/:name',
component: Main,// 嵌套路由
props: true,
children: [
404
那如果我们进入错误的页面,我们想给他跳转404页面怎么做呢?
我们创建一个404页面组件。
在views下面建立一个NotFound.vue
接着,配置路由
我们在index.js中导入我们的组件
配置路径,除了我们上面配置的路径之外的页面都走404组件
路由钩子与异步请求
beforRouteEnter
:在进入路由前执行
beforRouteLeave
:在离开路由前执行
export default {
props: ['id'],
name: "UserProfile",
//拦截器
beforeRouteEnter: (to,form,next)=>{
console.log("进入之前");
next();
},
beforeRouteLeave:(to,form,next)=>{
console.log("进入之后");
next();
}
在钩子函数中使用异步请求
1、安装Axios
cnpm install axios -s
2、在main.js中引用Axios
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
3、我们在static目录下建一个文件夹mock,用来存放我们的测试数据。
我们创建data.json
{
"name":"菜菜",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
最后使用异步请求
export default {
props: ['id'],
name: "UserProfile",
//拦截器
beforRouteEnter: (to,form,next)=>{
console.log("进入之前"); //加载数据
next(vm=>{
vm.getData(); //进入路由之前执行这个方法
});
},
beforRouteLeave: (to,form,next)=>{
console.log("进入之后");
next();
},
methods: {
getData: function (){
this.axios({
method: 'get',
url: 'http://localhost:8081/static/mock/data.json'
}).then(function (response){
console.log(response)
});
}
}
问题
没有显示页面内容
点击进入main页面之后,点击侧边栏,没有显示页面的内容,很可能是因为没有把他们显示出来,我们需要在Main.vue中,添加显示视图
<!-- 用来显示页面内容 -->
<el-main>
<router-view />
</el-main>
不执行路由钩子
检查一下路由钩子是否写正确了,看后台有没有输出内容,直接访问http://localhost:8081/static/mock/data.json
看能不能拿到数据。
//拦截器
beforeRouteEnter: (to,form,next)=>{
console.log("进入之前"); //加载数据
next(vm=>{
vm.getData(); //进入路由之前执行这个方法
});
},
beforeRouteLeave: (to,form,next)=>{
console.log("进入之后");
next();
},
是beforeRouteEnter
和beforeRouteLeave
,一个字母都不能写错!