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 学习技巧
Feb 17 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
js实现轮播图特效
May 28 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 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
js 居中漂浮广告
2010/03/21 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
js随机生成一个验证码
2017/06/01 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
python标识符命名规范原理解析
2020/01/10 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
应届生的求职推荐信范文
2013/11/30 职场文书
写求职信有什么意义
2014/02/17 职场文书
班组建设经验交流材料
2014/05/12 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
入股合作协议书
2014/10/12 职场文书
人事任命通知
2015/04/20 职场文书
电影建党伟业观后感
2015/06/01 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书