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 相关文章推荐
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
express异步函数异常捕获示例详解
Nov 30 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源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
vue实现购物车列表
2020/06/30 Javascript
python 实现归并排序算法
2012/06/05 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python 如何实现访问者模式
2020/07/28 Python
详解Python高阶函数
2020/08/15 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
厨师长岗位职责
2014/03/02 职场文书
聚美优品励志广告词
2014/03/14 职场文书
运动会开幕式主持词
2015/07/01 职场文书
新入职员工工作总结
2015/10/15 职场文书
高二英语教学反思
2016/03/03 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
Python可视化神器pyecharts绘制水球图
2022/07/07 Python