vue-router单页面路由

所属分类: 网络编程 / JavaScript 阅读数: 218
收藏 0 赞 0 分享

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>

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

更多精彩内容其他人还在看

浅谈Koa2框架利用CORS完成跨域ajax请求

这篇文章主要介绍了浅谈Koa2框架利用CORS完成跨域ajax请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅析Vue中method与computed的区别

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue2.0 http请求以及loading展示实例

下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

轻松搞定jQuery+JSONP跨域请求的解决方案

了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
收藏 0 赞 0 分享

Vue2.0实现组件数据的双向绑定问题

这篇文章主要介绍了Vue2.0实现组件数据的双向绑定问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

node的process以及child_process模块学习笔记

这篇文章主要介绍了node的process以及child_process模块学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue2.0 循环遍历加载不同图片的方法

下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈Vue2.0中v-for迭代语法的变化(key、index)

下面小编就为大家分享一篇浅谈Vue2.0中v-for迭代语法的变化(key、index),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用vue-aplayer插件时出现的问题的解决

这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Element-ui table中过滤条件变更表格内容的方法

下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多