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 相关文章推荐
php,js,css字符串截取的办法集锦
Sep 26 Javascript
开启BootStrap学习之旅
May 04 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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扩展函数
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
php的4种常用运行方式详解
2016/12/22 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python 实现IP子网计算
2021/02/18 Python
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
平面设计岗位职责
2013/12/14 职场文书
人力资源主管职责范本
2014/03/05 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
保研推荐信格式
2015/03/25 职场文书
单位病假条范文
2015/08/17 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书