二十、路由嵌套

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

前端

Cisco IOS 扩展IP访问列表漏洞

Linux Kernel drivers/net/pppol2tp.c文件内核堆内存破坏漏洞

【PC】批量调整图片Light Image Resizer绿化版

前端水印使用方式

BestShopPro ‘pokaz_podkat.php’ SQL注入漏洞

❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️

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

二十、路由嵌套

1. 什么是路由嵌套

2. 实战

二十一、参数传递

不使用props

使用props

实例demo

需求

实现

二十二、组件重定向

二十三、路由模式

修改路由配置

二十四、404