Project training records (eleven) - routing nesting and routing parameters in Vue

Table of contents

1. What did you do?

2. Problems and solutions

2.1 Problems

2.1.1 Desired results

2.1.2 Problem Analysis

2.2 Solution - routing nesting and routing parameter passing in Vue

2.2.1 Vue Routing Nesting Introduction

2.2.2 Vue's routing parameters

2.2.3 Problem Solving

Summarize

---

1. What did you do?

Data deduplication work and front-end improvement will be completed this week.

cleanup work

        Mainly to delete duplicate data inserted by users. It is up to the administrator to decide whether a table allows duplicate data. If the table uploaded by the user does not allow it, the deduplication method is called after the user uploads the data; if the table allows duplication, it does not need to be called.

        In addition, whether adding a management table on the administrator side allows the deduplication function. Can be edited. When editing, if it is changed from allowing duplicates to allowing duplicates, it will remain unchanged; if it is changed from allowing duplicates to disallowing duplicates, the data deduplication method will be called.

Perfect front end

        Add a welcome interface.

        Add prompt information.

        Add a back button.

This time, I mainly encountered the problem of vue routing parameter passing when adding the welcome interface.

2. Problems and solutions

2.1 Problems

2.1.1 Desired results

Display the current administrator's name on the welcome screen. It turned out that the name of the parameter administrator could not be passed.

2.1.2 Problem Analysis

The default-active of the navigation menu is used in the interface to indicate the index of the currently active menu.

 <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>

Use the saveNavState() method to replace the index. But what is needed now is the welcome interface, and the welcome interface needs to pass the parameter administrator information on the current interface.

So first you need to initialize the activePath of the variable in created(), and add parameters at the same time.

2.2 Solution - routing nesting and routing parameter passing in Vue

2.2.1 Vue Routing Nesting Introduction

        Routing in vue is implemented through the vue plug-in vue-router. Routing in vue has two modes:  hash mode (default) and history mode, which display different components according to different paths.

 First-level routing format:

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

Secondary routing pattern:

    {
      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's routing parameters

query method:

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

Params method:
1. Routing configuration needs to be performed first.
2. Params pass parameters to separate the name and value. The parameter name is written in the routing configuration and the value is written in the navigation.

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

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

2.2.3 Problem Solving

My code solves:

1. Modify the route

//把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. Obtain activePath in the created() method as the welcome interface, and use params to pass parameters.

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

The default-active of the navigation menu is directly activated to call the welcome interface and pass parameters

3. Page Fetching

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

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

Problem solved!

---

Summarize

This article mainly introduces routing nesting and routing parameter passing in Vue. Pay attention to the format when using routing to pass parameters later. And the use of window.sessionStorage.getItem(), window.sessionStorage.setItem() page temporary storage method.