vue-router：嵌套路由的使用方法_网络技术_宿州市腾雀网络科技有限公司

vue-router：嵌套路由的使用方法

发布时间 - 2026-01-10 23:12:07 点击率：次

模板抽离

我们已经学习过了Vue模板的另外定义形式，使用<template></template>。

  <!-- 模板抽离出来 -->
  <template id="home">
    <div>首页</div>
  </template>

  <template id="news">
    <div>新闻</div>
  </template>

然后js里定义路由组件的时候：

    // 1. 定义（路由）组件。
    const Home = { template: '#home' };
    const News = { template: '#news' };

路由嵌套

实际应用界面，通常由多层嵌套的组件组合而成。

比如，我们 “首页”组件中，还嵌套着 “登录”和 “注册”组件，那么URL对应就是/home/login和/home/reg。

  <template id="home">
    <!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->
    <div>
      <h2>首页</h2>
       <router-link to="/home/login">登录</router-link>
      <router-link to="/home/reg">注册</router-link>
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
  </template>

这是访问/home后的模板，其中我们需要把/home/login和/home/reg渲染进来。

完成上面代码后，HTML结构如下图：

登录和注册2个组件

  <template id="login">
    <div>登录界面</div>
  </template>
  <template id="reg">
    <div>注册界面</div>
  </template>

//定义路由组件
const Login = { template: '#login' };
    const Reg = { template: '#reg' };

3.定义路由

    // 2. 定义路由
    const routes = [
       { path: '/', redirect: '/home' },
      { 
        path: '/home', 
        component: Home, 
        children:[
          { path: '/home/login', component: Login},
          { path: '/home/reg', component: Reg}
        ]
      },
      { path: '/news', component: News}
    ]

注意我们在home路由配置了它的children。这就是嵌套路由。

4.案例全部代码如下：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body> 
  <div id="box">
    <p>
      <router-link to="/home">home</router-link>
      <router-link to="/news">news</router-link>
    </p>
     <router-view></router-view>
  </div>

  <!-- 模板抽离出来 -->
  <template id="home">
    <!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->
    <div>
      <h2>首页</h2>
       <router-link to="/home/login">登录</router-link>
      <router-link to="/home/reg">注册</router-link>
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
  </template>

  <template id="news">
    <div>新闻</div>
  </template>

  <template id="login">
    <div>登录界面</div>
  </template>
  <template id="reg">
    <div>注册界面</div>
  </template>

  <script type="text/javascript">
    // 1. 定义（路由）组件。
    const Home = { template: '#home' };
    const News = { template: '#news' };

    const Login = { template: '#login' };
    const Reg = { template: '#reg' };

    // 2. 定义路由
    const routes = [
       { path: '/', redirect: '/home' },
      { 
        path: '/home', 
        component: Home, 
        children:[
          { path: '/home/login', component: Login},
          { path: '/home/reg', component: Reg}
        ]
      },
      { path: '/news', component: News}
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
      routes // （缩写）相当于 routes: routes
    })


    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
     router
    }).$mount('#box')

    // 现在，应用已经启动了！
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue # router # 嵌套路由 # 嵌套 # 2.0嵌套 # 全面解析vue router 基本使用(动态路由 # 嵌套路由) # vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法 # vue router学习之动态路由和嵌套路由详解 # vue router路由嵌套不显示问题的解决方法 # Vue Router4 嵌套路由的示例代码 # 首页 # 在这里 # 有一个 # 这是 # 都有 # 过了 # 这就是 # 而成 # 大家多多 # 如下图 # 实际应用 # 而让 # 路由功能 # 启动了 # reg # URL # login # br

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：实例讲解Laravel队列的简单使用

下一篇：“类魂”不能只做仿品！类魂精品制作人公开批评

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：实例讲解Laravel队列的简单使用

下一篇：“类魂”不能只做仿品！类魂精品制作人公开批评