vue-resource

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "vue": "^2.5.2",
+    "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

src/App.vue

@@ -2,6 +2,8 @@
   <div id="app">
     <img src="./assets/logo.png">
     <router-view/>
+    <router-view name="title1"/>
+    <router-view name="title2"/>
   </div>
 </template>
 

src/main.js

@@ -1,8 +1,9 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import VueResource from 'vue-resource'
+
+Vue.use(VueResource)
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -10,25 +10,8 @@ Vue.use(Router)
 
 export default new Router({
   routes: [{
-      path: '/test',
-      name: 'HelloWorld',
-      component: Test,
-      children: [{
-          path: 'Title1',
-          name: 'Title1',
-          component: Title1
-        },
-        {
-          path: 'Title2',
-          name: 'Title2',
-          component: Title2
-        }
-      ]
-    },
-    {
-      path: '/goods',
-      name: 'goods',
-      component: Goods
-    }
-  ]
+    path: '/test',
+    name: 'test',
+    component: Test,
+  }]
 })

src/view/test.vue

@@ -1,41 +1,29 @@
 <template>
   <div class="test">
-  	<!-- 动态路由 -->
-    This is id : {{$route.params.testId}}
-    <br/> 
-    This is name : {{$route.params.testName}}
-
-    <!-- 嵌套路由 -->
-    <router-link to="/test/title1">标题1</router-link>
-    <router-link to="/test/title2">内容2</router-link>
-    <router-view></router-view>
-
-    <!-- 编程式路由 -->
-    <div @click="gotoGoods">跳转到商品详情页面</div>
+    <button @click="get">click me</button>
   </div>
 </template>
 <script>
 export default {
-	data() {
-		return {
-			msg: 'hello vue'
-		}
-	},
-	methods: {
-		gotoGoods() {
-			// this.$router.push('/goods');
-
-      // this.$router.push({
-      //   path: '/goods?goodsId=666'
-      // });
-      this.$router.push({
-        path: '/goods',
-        query:{
-          goodsId:666
+  data() {
+    return {
+      msg: 'hello vue'
+    }
+  },
+  methods: {
+    get() {
+      this.$http.get('package.json', {
+        params: {
+          
+        },
+        headers: {
+          token: '123'
         }
-      });
-		}
-	}
+      }).then(res => {
+        this.msg = res.data;
+      })
+    }
+  }
 }
 
 </script>