二十、路由嵌套

1. 什么是路由嵌套

嵌套路由，又称子路由。
在实际应用中，通常由多层嵌套的组件组合而成。

2. 实战

创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件：

<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "UserProfile"
  }
</script>
<style scoped>
</style>
复制代码

创建用户列表组件，在 views/user 目录下创建一个名为 List.vue 的视图组件：

<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>
复制代码

修改 Main.vue 首页视图，使用 Element UI 布局容器组件：

<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 to="/user/profile">个人信息</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-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>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>
复制代码

使用children配置嵌套路由，修改router/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

    },
  ]
})
复制代码

二十一、参数传递

Vue-Router中的“path`传值问题

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。

例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了。

不使用props

修改src/router/index.js路由配置：

主要在path属性中增加:id占位符

{
  path: '/user/profile/:id',
  name: 'UserProfile',
  component: UserProfile,
}
复制代码

前端传递参数：

在Main.vue，给to绑定对象v-bind:to或:to（:就是v-bind的省略）
router-link 中的 name 属性名称一定要和 路由配置中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径。
利用params来传递参数。

<!--name：传组件名 params：传递参数，需要绑定对象：v-bind-->
<router-link v-bind:to="{name: 'UserProfile', params: {id: 123}}">个人信息</router-link>
复制代码

目标组件Profile.vue中接收参数，并在视图中展示：

<template>
  <div>
    <h1>个人信息</h1>
    {{ $route.params.id }}
  </div>
</template
<script>
  export default {
    name: "UserProfile"
  }
</script>
<style scoped>
</style>
复制代码

{{ $route.params.id }}一定要用标签包围起来，不然会报错！！！

试试 http://localhost:8080/#/user/profile/123：

使用props

修改src/router/index.js路由配置，增加props:true属性：

{
  path: '/user/profile/:id',
  name: 'UserProfile',
  component: UserProfile,
  props: true,
}
复制代码

目标组件Profile.vue中接收参数的方式有些变化：

<template>
  <div>
    <h1>个人信息</h1>
      {{id}}
  </div>
</template>
<script>
  export default {
    name: "UserProfile",
    //传递参数
    props: ['id']
  }
</script>
<style scoped>
</style>

复制代码

试试http://localhost:8080/#/user/profile/123456：

实例demo

需求

通过登陆页面成功登陆后，在首页右上角展示用户名

实现

Login.vue的methods中获取当前用户名：

methods:{
  onSubmit(formName){
    this.$refs[formName].validate((valid)=>{
      if(valid){
        /*获取当前用户的用户名*/
        this.$router.push("/main"+"/"+this.form.username);
      }else {
        this.dialogVisible=true;
        return false;
      }
    });
  }
}
复制代码

修改src/router/index.js路由配置，/main路由接收name参数：

{
	path: '/main/:name',
	component: Main,
	props: true,
}
复制代码

Main.vue中接收参数，

<script>
  export default {
    name: "Main",
    props: ['name'],
  }
</script>
复制代码

然后展示数据，

</el-dropdown>
  <span>{{name}}</span>
</el-header>
复制代码

试试效果：

二十二、组件重定向

重定向，顾名思义。
但是 Vue 中的重定向是作用在路径不同但组件相同的情况下。

修改src/router/index.js路由配置，增加重定向路由redirect属性：

//重定向
}
  path: '/goLogin',
  redirect: '/login'
},
//登录页
{
  path: '/login',
  component: Login
},
复制代码

说明：

这里定义了两个路径，一个是 “/login，一个是/goLogin，其中 /goLogin重定向到了/login` 路径，由此可以看出重定向不需要定义组件。

Main.vue中重定向路由组件：

<el-menu-item index="1-3">
  <!--组件重定向-->
  <router-link to="/goLogin">回到登录页</router-link>
</el-menu-item>
复制代码

刷新页面，点击“回到登录页”试试

二十三、路由模式

路由模式有两种：

hash：
- 路径带 # 符号
- 如 http://localhost/#/login
history：
- 路径不带 # 符号
- 如 http://localhost/login

修改路由配置

在我们的路由配置文件src/router/index.js中指定路由模式mode：

export default new Router({
  mode: 'history',
  routes: [
  ]
});
复制代码

二十四、404

新建src/views/NotFound.vue：

<template>
    <div>
      <h1>哇~404,你的页面走丢了?</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>

复制代码

在路由配置文件src/router/index.js中配置路由：

//导入组件
import NotFound from "../views/NotFound.vue";

routes: [
  {
    path: "*",
    component: NotFound
  }
]
复制代码

试试访问http://localhost:8080/#/abv：

使用了history路由模式的话，访问http://localhost:8080/abv。

文章版权归作者所有，未经允许请勿转载。

THE END

前端

2021 年最值得使用的 Node.js 框架

Jelsoft vBulletin 未明漏洞

Cerb Ticket ‘Peek’ Popup 安全绕过漏洞

MaraDNS输入验证错误漏洞

QEMU KVM ‘virtio_queue_notify()’函数本地权限提升漏洞

iOS10之后权限设置

Vue快速入门学习笔记（六）

二十、路由嵌套

1. 什么是路由嵌套

2. 实战

二十一、参数传递

不使用props

使用props

实例demo

需求

实现

二十二、组件重定向

二十三、路由模式

修改路由配置

二十四、404

2021 年最值得使用的 Node.js 框架

Jelsoft vBulletin 未明漏洞

Cerb Ticket ‘Peek’ Popup 安全绕过漏洞

MaraDNS输入验证错误漏洞

QEMU KVM ‘virtio_queue_notify()’函数本地权限提升漏洞

iOS10之后 权限设置

Vue快速入门学习笔记（六）

二十、路由嵌套

1. 什么是路由嵌套

2. 实战

二十一、参数传递

不使用props

使用props

实例demo

需求

实现

二十二、组件重定向

二十三、路由模式

修改路由配置

二十四、404

iOS10之后权限设置