4、 配置嵌套路由修改 router 目录下的 index.js 路由配置文件，使用children放入main中写入子模块，代码如下
index.js
//导入vue import Vue from 'vue'; import VueRouter 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(VueRouter); //导出 export default new VueRouter({ routes: [ { //登录页 path: '/main', component: Main, // 写入子模块 children: [ { path: '/user/profile', component: UserProfile, }, { path: '/user/list', component: UserList, }, ] }, //首页 { path: '/login', component: Login }, ] })
(十七)、参数传递及重定向
1.第一种取值
(1).添加路由配置 index.js
children:[ { path:'/user/profile/:id',name:'UserProfile',component:UserProFile }, { path:'/user/list',component:UserList } ] 新增数据
import Vue from "vue"; import VueRouter from "vue-router"; import Main from '../view/Main' import Login from "../view/Login"; import UserList from '../view/user/List' import UserProFile from "../view/user/Profile"; Vue.use(VueRouter); export default new VueRouter({ routes:[ { path:'/main', component: Main, children:[ { path:'/user/profile/:id',name:'UserProfile',component:UserProFile }, { path:'/user/list',component:UserList } ] }, { path:'/login', component: Login } ] })
(2).设置主界面
Main.vue： <router-link v-bind:to="{name: 'UserProfile',params:{id: 1}}">个人信息</router-link>。我们首先绑定to标签，然后name的值与路由器配置的name一致。然后 params:{参数名:数据}
<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 v-bind: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-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-submenu index="3"> <template slot="title"><i class="el-icon-caret-right"></i>系统管理</template> <el-menu-item-group> <el-menu-item index="3-1">退出</el-menu-item> <el-menu-item index="3-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: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #2f2e2e; } </style>
(3).展示数据
profile.vue
切记取得值必须用div块进行包裹，否则会报错
<template> <div> <h1>个人信息</h1> <!-- 必须用标签 框起来 否则报错--> {{ $route.params.id }} </div> </template> <script> export default { name: "UserProfile" } </script> <style scoped> </style>
2.第二种取值 【props 解耦】
(1).修改路由配置
1、修改路由配置 , 主要在router下的index.js中的路由属性中增加了 props: true 属性
{ path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true }
传递参数和之前一样 在Main.vue中修改route-link地址
<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定--> <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
(2).更改propfils.vue
<template> <div> <h1>个人信息</h1> <!-- 必须用标签 框起来 否则报错--> <!-- {{ $route.params.id }}--> {{id}} </div> </template> <script> export default { props:['id'], name: "UserProfile" } </script> <style scoped> </style>
3.重定向
(1).添加路由
{ path:'/goHome', redirect:'/main' 跳转的路由 }
(2).展示路由
<el-menu-item index="1-3"> <!--插入的地方--> <router-link to="/goHome">回到主页</router-link> </el-menu-item>
