vue路由

vue路由--- SPA应用,单页面应用
vue-resouce 交互
vue-router 路由
根据不同url地址,出现不同效果
学习时vue-resouce版本0.7.13
一、例子:
主页 home
新闻页 news

 html:
    <a v-link="{path:'/home'}">主页</a>   跳转链接
    
    展示内容:
    <router-view></router-view>
 js:
    //1. 准备一个根组件
    var App=Vue.extend();

    //2. Home News组件都准备
    var Home=Vue.extend({
        template:'<h3>我是主页</h3>'
    });

    var News=Vue.extend({
        template:'<h3>我是新闻</h3>'
    });

    //3. 准备路由
    var router=new VueRouter();

    //4. 关联
    router.map({
        'home':{
            component:Home
        },
        'news':{
            component:News
        }
    });

    //5. 启动路由
    router.start(App,'#box');

 跳转:
     router.redirect({
         ‘/’:'/home'
     });

二、路由嵌套(多层路由):

 主页 home
     登录 home/login
     注册 home/reg
 新闻页    news

 subRoutes:{
    'login':{
        component:{
            template:'<strong>我是登录信息</strong>'
        }
    },
    'reg':{
        component:{
            template:'<strong>我是注册信息</strong>'
        }
    }
 }
 路由其他信息:
     /detail/:id/age/:age

     {{$route.params | json}}   ->  当前参数

     {{$route.path}}    ->  当前路径
    
     {{$route.query | json}}    ->  数据
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说,浏览器和超级连接的跳转方式已经...
    IT老马阅读 718评论 0 2
  • [vue路由的使用] ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单...
    LaBaby_阅读 490评论 0 0
  • 各位乡亲父老们: 你们好,我是蔷薇下的阳光,好吧,你们以后可以叫我蔷薇(''),我是冷酷无情的现言版主,也是接龙客...
    蔷薇下的阳光阅读 2,740评论 74 53
  • 2017-07-05 文/大仙 创星系 定位就是说清楚你是谁。 Slogen就是要说清楚你为什么好。 把一个品牌或...
    阳光书院阅读 1,387评论 0 0
  • 一、政策改革,能力是方向 1、高考语数外必考,英语计入总分,其他科目任选三门,英语高一就可以考,一年考两次,取最高...
    常青藤英文私塾阅读 174评论 0 0