Vue的参数传递和重定向
参数传递这个地方比较麻烦,直接给步骤理清一下思路
- 首先要确定在Header.vue里面的组件’个人信息’,写入传递参数:to="{name:xxx ,params:{xx:xx}}"
- 然后需要在index.js里面文件在路由的路径上表明可以接收参数:xx
- 然后需要在接收参数的组件Profile.vue声明可以接收参数,接收参数有两种方式,第一种$route.params.xxx,第二种就是组件接收参数的属性props:[xx,xx],但是需要在路由上面声明可以接收参数props:true
最后重定向也不难,只需要加上一个路由,举个例子
{path:‘xxx’ ,redirect:‘main’},这样就能够跳转了,而不需要重新创建一个组件过渡
代码(Header.vue(Main))
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></i>用户管理
</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link :to="{name:'UserProfile',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-2">
<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-menu"></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></router-view>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
name:"Header"
};
</script>
代码(index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "../view/Login";
import Header from "../view/Header";
import Profile from "../view/user/Profile";
import List from "../view/user/List";
Vue.use(VueRouter);
export default new VueRouter({
routes:[
{
path:'/login',
component:Login,
},
{
path: '/main',
component: Header,
children:[
{
path:'/user/profile/:id',
name:'UserProfile',
props:true,
component:Profile
},
{
path:'/user/list',
component:List
},
{
path:'/goHome',
redirect:'/main'
}
]
}
]
})
代码(profile.vue)
<template>
<div>
<h1>个人信息</h1>
{{id}}
</div>
</template>
<script>
export default {
props: ['id'],
name: "Profile"
}
</script>
<style scoped>
</style>