项目实训记录（十一）——Vue中路由嵌套和路由传参

目录

一、做了什么？

二、问题及解决办法

2.1 问题

2.1.1想要的结果

2.1.2 问题分析

2.2 解决方法-Vue中路由嵌套和路由传参

2.2.1 Vue路由嵌套介绍

2.2.2 vue的路由传参

2.2.3 问题解决

总结

---

一、做了什么？

本周要完成数据去重工作和前端的完善。

清理工作

        主要是来删除用户插入的重复数据。由管理员决定表是否允许重复数据。如果用户上传的表不允许，则在用户上传数据后调用去重方法；如果表允许重复，则不用调用。

        另外，在管理员端添加管理表是否允许去重功能。可以进行编辑。编辑时，如果由不允许重复改为允许重复，则不变；如果由允许重复改为不允许重复，则调用数据去重方法。

前端完善

        增加一个欢迎界面。

        增加提示信息。

        增加上一步按钮。

本次主要在增加欢迎界面时遇到了vue路由传参问题。

二、问题及解决办法

2.1 问题

2.1.1想要的结果

在欢迎界面显示当前管理员名字。结果发现参数管理员姓名传不过来。

2.1.2 问题分析

在界面使用了导航菜单的default-active，表明当前激活菜单的 index。

 <el-aside :width="isCollapse ?'64px':'200px'">

        <div class="toggle-button" @click="toggleCollapse">|||</div>

        <el-menu

          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
         
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :default-active="activePath">

          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-money"></i>
              <span>用户信息</span>
            </template>

            <el-menu-item index="/uinfo" @click="saveNavState('/uinfo')">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>查看用户信息</span>
              </template>
            </el-menu-item>
          </el-submenu>
      </el-menu>
</el-aside>

利用saveNavState（）方法来进行index的替换。但是现在需要的是欢迎界面，且欢迎界面需要当前界面传递参数管理员信息。

所以首先需要在created（）中进行变量的activePath的初始化，同时要加参数。

2.2 解决方法-Vue中路由嵌套和路由传参

2.2.1 Vue路由嵌套介绍

        vue中路由是通过vue的插件vue-router来实现的 ，vue中路由有两种模式 hash模式（默认） history模式 ,根据不同的路径显示不同的组件。

 一级路由格式：

 //路由懒加载模式
{
          path: '/home1',
          name: 'home1',
          component: () => import('@/views/ModifyDB/index.vue')
 },
//重定向模式
{
          path: '/home',
          name: 'home',
          //重定向页面
          redirect: '/home/stepOne',
          component: () => import('../views/home')
}

二级路由模式：

    {
      path: '/z1',
      name: 'z1',
      component: () => import('./views//qza/z1.vue'),
      redirect: './z2',//默认主页 这里是重定向的使用快捷方式
      children:[
        {
          path: '/z2',
          name: 'z2',
          component: () => import('./views//qza/z2.vue'),
        },
      ]
    }

2.2.2 vue的路由传参

query方式：

​ 	//编程导航的语法
​ 		*this.$router.push('/path?参数=值')*
​	//获取：
​ 		*this.$route.query.参数名*

params方式：
1.需要先进行路由配置
2.​ params传参把名和值分开 参数名在路由配置中写 值在导航中写

 //1、修改路由配置
​ 	   *path:"/path/:参数名"*
​ //2、视图导航语法

       *​ this.$router.push({name:'',params:{参数名：值}})*
​ //获取：
       ​*this.$route.params.参数名*

2.2.3 问题解决

我的代码解决：

1.修改路由

//把path改为"/path/:参数名" 形式
//path: '/:aaname'表示path为/‘’参数名为aaname
{
      path: '/main',
      name: 'HelloWorld',
      component: Gindex,
      children: [
        {
          path: '/:aaname',
          component: () => import('@/views/huanying/HuanYing.vue'),
          name: 'huanying',
          meta: {
            title: "工作台",
            icon: 'el-icon-s-home',
            roles: ['admin','jerry']
          }
        },
        {path: '/0-0', component: xxxx},
        {path: '/0-1', component: xxxx},
        {path: '/1-1', component: xxxx},  
     ]
}

2.在created（）方法中获取activePath为欢迎界面，同时利用params方式传递参数。

//传参方式：activePath/参数    activePath：想要到界面的path
this.activePath = window.sessionStorage.getItem('activePath')+'/'+this.aaname;

导航菜单的default-active直接激活调用欢迎界面并传递参数

3.页面获取

 //获取方式//获取：*this.$route.query.参数名*
created(){

    this.aname=this.$route.query.aaname
    this.aname=JSON.parse(localStorage.getItem("admin"))
    
    },

问题就解决啦！

---

总结

本文主要对Vue中路由嵌套和路由传参进行介绍。之后再利用路由传参时要注意格式。和window.sessionStorage.getItem（）、window.sessionStorage.setItem（）页面暂存方法的使用。