151Vue-router路由嵌套children+动态匹配路由$route.params+传参数props:true+命名路由

最新推荐文章于 2022-09-10 12:08:33 发布

教练我真的想敲代码

最新推荐文章于 2022-09-10 12:08:33 发布

阅读量537

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/gy_9543/article/details/107892551

版权

本文详细探讨了Vue-router的高级用法，包括children路由嵌套、利用$route.params进行动态匹配以及如何通过props传递更灵活的参数。还介绍了函数类型的props配置，以实现同时获取路径参数和自定义数据。最后，阐述了命名路由的使用，帮助开发者更好地组织和管理应用的路由结构。

摘要由CSDN通过智能技术生成

在这里插入图片描述

children

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view> 
    </div>

    <script>
      const User = {
    
        template: '<h1>User 组件</h1>'
      }

      const Register = {
    
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router