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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
node网页分段渲染详解
Sep 05 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 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
实用函数4
2007/11/08 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python 读取位于包中的数据文件
2020/08/07 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
创业计划书六个要素
2013/12/26 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
一年级班主任寄语
2014/01/19 职场文书
投标邀请书范文
2014/01/31 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
公司合作协议书范本
2014/04/18 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
党员思想汇报材料
2014/12/19 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS