Vue之路由和请求

Vue的路由就相当于一个a连接，完成点击跳转的功能依赖文件vue-router.js，
Vue的http请求就是相当于ajax,依赖文件vue-resource.js
直接贴完成页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script src="vue-resource.js"></script>
    <style>
        a{   
            text-decoration: none;  //因为router-link编译后就是a
        }
    </style>
</head>

<body>

    <div id="app">
          <h1>Hello App!</h1>
          <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
            <!-- 自定义的组件模板 -->
            <self-component></self-component>
          </p>

          <!-- 路由出口 -->
          <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <div id="div"></div>
    <script>

    // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 vue.use(vuerouter)

    // 1. 定义（路由）组件。
    // 也可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = Vue.component('self-component', { template: '<div>bar</div>' })

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const route1 = new VueRouter({
      routes, // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    const app = new Vue({
        //el:'#app',  和下面的$mount一样的效果
      router:route1,
      mounted:function(){
          //当然也可以是get
        this.$http.jsonp('http://rap.taobao.org/mockjsdata/8591/api',{
                params: { productCourseId: 234,productId:456} //参数列表
            })
            .then(function(response){
                return response.json();  //这里 == response.body
            })
            .then(function(response){
                console.log(response.data)
            })
      }
    }).$mount('#app')

    //post方式 不需要params，但是需要加一个参数对象emulateJSON:true
    this.$http.jsonp('http://rap.taobao.org/mockjsdata/8591/api',{
                productCourseId: 234,productId:456 //参数列表
            },{
                emulateJSON:true
            })
            .then(function(response){
                return response.json();  //这里 == response.body
            })
            .then(function(response){
                console.log(response.data)
            })
    </script>
</body>
</html>
2016-10-18