Vue的路由嵌套和参数传递（单个和多个）

Vue的路由嵌套

路由嵌套能够实现主页面点击跳转之后子页面展示到相应的位置

如这里的一个简单路由嵌套实现页面跳转的示例
点击用户信息即跳转到用户信息页面

点击用户列表即跳转到用户列表页面

• 项目前期准备

1. 使用vue-cli脚手架搭建好一个空项目
2. 安装好路由组件vue-router
3. 安装好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里面