编程 Javascript

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>

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

vue-router单页面路由

- Author -

孙三峰

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 可以拖动的DIV（二）

Jun 26 Javascript

cnblogs 代码高亮显示后的代码复制问题解决实现代码

Dec 14 Javascript

jquery实现浮动的侧栏实例

Jun 25 Javascript

jquery马赛克拼接翻转效果代码分享

Aug 24 Javascript

jQuery实现简单的文件上传进度条效果

Mar 26 Javascript

JS实现直接运行html代码的方法

Mar 13 Javascript

View.post() 不靠谱的地方你知道多少

Aug 29 Javascript

简单实现jQuery弹窗效果

Oct 30 jQuery

swiper在vue项目中loop循环轮播失效的解决方法

Sep 15 Javascript

微信小程序使用template标签实现五星评分功能

Nov 03 Javascript

VUE前后端学习tab写法实例

Aug 06 Javascript

详解ES6 CLASS在微信小程序中的应用实例

Apr 24 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