vue 2.0路由之路由嵌套示例详解


Posted in Javascript onMay 08, 2017

前言

vue一个重要的方面就是路由,下面是自己写的一个路由的例子分享给大家供大家参考学习,下面来看看详细的介绍。

方法如下:

1、引入依赖库就不必再说

2、创建组件

两种写法

第一种:间接

<template id="home">

 <div>

  <h1>Home</h1>

  <p>{{msg}}</p>

 </div>

 </template>
var About = Vue.extend({

   template: '#about'

  });

第二种:直接

var Out = Vue.extend({

   template: '<div><h1>Out</h1><p>This is the tutorial out vue-router.</p></div>'

  });

3、创建 router 实例,传 'routes'路由映射配置

var router = new VueRouter({

   routes: [

   { path: '/路径', component: 组件名 },

    { path: '/', component: 组件名}, //设置默认路径


 { path: "*", component:Home }//路径不存在   <br>

] 

 });

4、创建和挂载根实例。记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能

var vm = new Vue({

    router: router 

 }).$mount('#app');

整体的demo

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>hello world</title>

</head>

<body>

 <div id="app">

  <div>

   <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->

   <router-link to="/home">Go to Home</router-link>

   <router-link to="/about">Go to About</router-link>

   <router-link to="/out">Go to Out</router-link>

  </div>

 

  <!-- 5、在页面上使用<router-view></router-view>标签,用于渲染匹配的组件 -->

  <!--这里显示的是展示的界面-->

  <router-view></router-view>   

 </div>

  

 <template id="home">

   <div>

    <h1>Home</h1>

    <p>{{msg}}</p>

   </div>

 </template>

 <template id="about">

   <div>

    <h1>about</h1>

    <p>This is the tutorial about vue-router.</p>

   </div>

 </template>

  

   

 

 <!-- 0、引入依赖库 -->

 <script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>

<script src="lib/vue-router.min.js" type="text/javascript" charset="utf-8"></script>

 <script type="text/javascript">

  /* 1、创建组件 */

  var Home = Vue.extend({

   template: '#home',

   data: function() {

    return {

     msg: 'Hello, vue router!'

    }

   }

  });

  var About = Vue.extend({

   template: '#about'

  });

  var Out = Vue.extend({

   template: '<div><h1>Out</h1><p>This is the tutorial out vue-router.</p></div>'

  });

 

  // 2. 创建 router 实例,然后传 `routes`路由映射 配置

  var router = new VueRouter({

   routes: [

   { path: '/home', component: Home },

    { path: '/about', component: About },

    { path: '/out', component: Out },

    {path: '/', component: Home },//设置默认路径

   { path: "*", component:Home }//路径不存在

   

   ]

  });

 

  // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能

  var vm = new Vue({

    router: router 

  }).$mount('#app');

 

  // 现在,应用已经启动了!

 </script>

</body>

</html>

关于路由嵌套

在配置routes映射时添加children配置

如下:

var router = new VueRouter({

 routes:[

  {path:'/home',component:Home,

   children:[//子路由

    {path:'news',component:News},

    {path:'change',component:change}    

  ]},

  {path:'/me',component:Me},

  {path:'/',component:Me}

  ]

 })

关于具体的demo可以参考GitHub上,另外还总结了一些自己最近在学习的阿里云上传图片等,会逐步更新,敬请指教!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
使用JS读秒使用示例
Sep 21 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
node.js中EJS 模板快速入门教程
May 08 #Javascript
详解用node-images 打造简易图片服务器
May 08 #Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 #Javascript
angular实现IM聊天图片发送实例
May 08 #Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 #Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 #Javascript
详解JavaScript中return的用法
May 08 #Javascript
You might like
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python生成密码库功能示例
2017/05/23 Python
python装饰器深入学习
2018/04/06 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
公司周年庆典邀请函
2014/01/12 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
小学生读书活动总结
2014/06/30 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书