vue-router单页面路由


Posted in Javascript onJune 17, 2017

vue中,有一个类库叫做vue-router,是用来做单页面路由的。做路由一般分为四个步骤:

  • 准备一个根组件

    vue.extend();

  • 需要做路由的内容准备

    template;

  • 准备路由 new VueRouter();
  • 关联路由   map
  • 启动路由 start(App,'#box');//第一个参数是准备的根组件,第二个参数是要捆绑的位置就是自己定义的id中

github上vue-router下载地址:https://github.com/vuejs/vue-router

关于路由跳转的简单代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/vue-router.js" ></script>
    <script type="text/javascript" src="js/vue-resource.js" ></script>
    <title></title>
  </head>
  <body>
    <div id="box">
      <ul>
        <li>
          <a v-link="{path:'/home'}">我是第一个a</a>
        </li>
        <li >
          <a v-link="{path:'news'}">我是第二个a</a>
        </li>
      </ul>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </body>
  <script>
    //1.准备一个根组件
    var App=Vue.extend();
    
    //2.Home News 组件准备
    var Home=Vue.extend({
      template:'<h3>我是第一个a的内容页</h3>'
    });
    
    var News=Vue.extend({
      template:'<h3>我是第二个a的内容页</h3>'
    })
    
    //3.准备路由
    var router = new VueRouter();
    
    //4.关联
    
    router.map({
      'home':{
        component:Home
      },
      'news':{
        component:News
      }
    })
    
    //5.启动路由
    
    router.start(App,'#box');
  </script>
</html>

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

Javascript 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 #Javascript
JavaScript输入框字数实时统计更新
Jun 17 #Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 #Javascript
bootstrap paginator分页前后台用法示例
Jun 17 #Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 #Javascript
深入理解Webpack 中路径的配置
Jun 17 #Javascript
详解Vue组件之间的数据通信实例
Jun 17 #Javascript
You might like
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
CI框架表单验证实例详解
2016/11/21 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
原生js实现日历效果
2020/03/02 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
学年自我鉴定范文
2013/10/01 职场文书
大学生党课思想汇报
2013/12/29 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android