Vue的路由嵌套
路由嵌套能够实现主页面点击跳转之后子页面展示到相应的位置
如这里的一个简单路由嵌套实现页面跳转的示例
点击用户信息即跳转到用户信息页面
点击用户列表即跳转到用户列表页面
- 项目前期准备
- 使用vue-cli脚手架搭建好一个空项目
- 安装好路由组件vue-router
- 安装好element-ui
-
我的项目结构
-
使用element-ui的导航组件,构建主页面即 首页Home.vue
router-link是跳转的地址,路由地址需要在路由的js中进行配置
router-view页面显示的位置<template> <div> <el-row> <el-col :span="6"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-setting"></i> <span>User</span> </template> <!-- router-link是跳转的地址,需要在路由中进行配置 --> <router-link to="/UserInfo" tag="span"> <el-menu-item index="1-1">用户信息</el-menu-item> </router-link> <router-link to="/UserList" tag="span"> <el-menu-item index="1-2">用户列表</el-menu-item> </router-link> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> </el-menu> </el-col> <el-col :span="18"> <!-- router-view页面显示的位置 --> <router-view></router-view> </el-col> </el-row> </div> </template> <script> export default { methods: { handleOpen (key, keyPath) { console.log(key, keyPath) }, handleClose (key, keyPath) { console.log(key, keyPath) } } } </script> <style> </style>
-
创建好两个子页面
-
我的UserInfo.vue页面
<template> <h2>用户信息</h2> </template> <script> export default { name: 'UserInfo' } </script> <style scoped> </style>
-
我的UserList.vue页面
<template> <h2>用户列表</h2> </template> <script> export default { name: 'UserInfo' } </script> <style scoped> </style>
-
-
完成页面创建之后,在路由中进行配置路由
导入刚刚创建的三个页面
将HOME作为主页面
children里面就是它的子页面,子路由的配置方法和结构与主页面相同import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' // 导入刚刚创建的三个页面 import UserInfo from '@/components/User/UserInfo' import UserList from '@/components/User/UserList' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home, // 将HOME作为主页面 children: [ // children里面就是它的子页面,子路由的配置方法和结构与主页面相同 { path: '/UserInfo', component: UserInfo }, { path: '/UserList', component: UserList } ] } ] })
Vue的单个参数传递
在以上页面的基础上,实现传参
-
传递参数的方式,在路由跳转的时候加上params对象
<router-link :to="{name: 'UserInfo', params: {id:2}}" tag="span"> <el-menu-item index="1-1">用户信息</el-menu-item> </router-link>
-
改造路由配置
在路由地址后面通过
/:参数名
的方式,添加要接收的参数名,注意必须和传递的参数名保持一致routes: [ { path: '/', name: 'home', component: Home, children: [ { path: '/UserInfo/:id', // 携带参数的路由路径配置方式 name: 'UserInfo', component: UserInfo }, { path: '/UserList', name: 'UserList', component: UserList } ] } ]
-
接收参数并使用
通过$route.params对象来接收,然后进行使用
<template> <div> <h2>用户信息</h2> <!-- 通过$route.params对象来接收 --> <h3>收到的参数:{{$route.params.id}}</h3> </div> </template> <script> export default { name: 'UserInfo' } </script> <style scoped> </style>
-
实现的效果
这里的路由地址后面会跟上我们传递的参数
我们也能看到 页面收到的参数值
Vue的多参数传递
通过props传递多个参数的实现方式(在以上的基础上进行完善和改造)
-
路由跳转携带参数的方式
<router-link :to="{name: 'UserInfo', params: {id:2, name: 'xiaomin'}}" tag="span"> <el-menu-item index="1-1">用户信息</el-menu-item> </router-link>
-
路由配置规则的修改
添加props为true
routes: [ { path: '/', name: 'home', component: Home, children: [ { path: '/UserInfo', name: 'UserInfo', component: UserInfo, props: true //添加props为true }, { path: '/UserList', name: 'UserList', component: UserList } ] } ]
-
参数的接受和使用方式
通过props放hi接收参数,然后直接使用
<template> <div> <h2>用户信息</h2> <h3>收到的参数:ID:{{id}}</h3> <!-- 直接进行使用 --> <h3>收到的参数:Name:{{name}}</h3> </div> </template> <script> export default { props: ['id', 'name'], // 通过props放hi接收参数 name: 'UserInfo' } </script> <style scoped> </style>
-
实现的效果,通过props的方式传递的话参数不会直接携带到URL里面