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浏览器兼容教程之事件处理
Jun 09 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 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 已经成熟
2006/12/04 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
深入理解Django中内置的用户认证
2017/10/06 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
使用TensorFlow实现SVM
2018/09/06 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
自考自我鉴定范文
2013/10/30 职场文书
研修第一天随笔感言
2014/02/15 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
退学证明范本3篇
2014/10/29 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Python中json.dumps()函数的使用解析
2021/05/17 Python