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


Posted in Javascript onFebruary 21, 2017

模板抽离

我们已经学习过了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结构如下图:

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

登录和注册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:嵌套路由的使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 #Javascript
vue-router路由简单案例介绍
Feb 21 #Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 #Javascript
微信小程序 UI与容器组件总结
Feb 21 #Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 #Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 #Javascript
微信小程序 支付功能开发错误总结
Feb 21 #Javascript
You might like
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php实现json编码的方法
2015/07/30 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
彻底搞懂Python字符编码
2018/01/23 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
20行python代码实现人脸识别
2019/05/05 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
高中同学聚会邀请函
2014/01/11 职场文书
书法比赛获奖感言
2014/02/10 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
优秀党支部申报材料
2014/12/24 职场文书
爱心捐款感谢信
2015/01/20 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript