Vue router

Advanced/vuedemo02/src/components/Content.vue

@@ -0,0 +1,29 @@
+<template>
+   
+    <div id="content">    
+       我是详情页面
+    </div>
+</template>
+
+
+<script>
+    
+
+
+    export default{
+
+        data(){
+
+            return{
+
+                msg:'数据'
+            }
+        },
+        mounted(){
+
+                console.log(this.$route.params);  /*获取动态路由传值*/
+
+        }
+
+    }
+</script>

Advanced/vuedemo02/src/components/News.vue

@@ -0,0 +1,32 @@
+<template>    
+    <div id="news">    
+       我是新闻组件   
+
+
+     <ul>
+        <li v-for="(item,key) in list">
+             <router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
+        </li>
+     </ul>
+          
+    </div>
+
+</template>
+
+
+<script>
+
+    export default{
+        data(){
+            return {               
+               msg:'我是一个新闻组件'  ,    
+               list:['111111','222222','333333']        
+            }
+        }
+    }
+
+</script>
+
+<style lang="scss" scoped>
+    
+</style>

Advanced/vuedemo02/src/components/Pcontent.vue

@@ -0,0 +1,31 @@
+<template>
+   
+    <div id="content">    
+      商品详情
+    </div>
+</template>
+
+
+<script>
+    
+
+
+    export default{
+
+        data(){
+
+            return{
+
+                msg:'数据'
+            }
+        },
+        mounted(){
+
+              //获取get传值
+
+
+              console.log(this.$route.query);
+        }
+
+    }
+</script>

Advanced/vuedemo02/src/main.js

@@ -7,7 +7,30 @@ import VueRouter from 'vue-router'
 import * as Api from './common/api'
 import * as common from './common/common'
 
+Vue.use(VueRouter);
+
+//1.创建组件
+import Home from './components/Home.vue';
+import News from './components/News.vue';
+import Content from './components/Content.vue';
+import Pcontent from './components/Pcontent.vue';
+
+//2.配置路由
+const routes = [
+  { path: '/home', component: Home },
+  { path: '/news', component: News },
+  { path: '/content/:aid', component: Content },   /*动态路由*/
+  { path: '/pcontent', component: Pcontent },
+  { path: '*', redirect: '/home' }   /*默认跳转路由*/
+]
+
+//3.实例化VueRouter
+const router = new VueRouter({
+  routes // （缩写）相当于 routes: routes
+})
+
 new Vue({
   el: '#app',
+	router,
   render: h => h(App)
 })

Advanced/vuedemo02/src/router/routers.js

@@ -7,10 +7,10 @@
  *      @type {*[]}
  */
 const routers = [
-    {
-        path: '/',
-        redirect: '/index'
-    },
+//     {
+//         path: '/',
+//         redirect: '/index'
+//     },
     {
         path: '/index',
         component: resolve => require(['../pages/Home/Index'], resolve),
@@ -21,6 +21,7 @@ const routers = [
             keepAlive: true
         }
     },
+	{ path: '/home', component: resolve=>rerquire(['../componets/Home.vue'],resolve) },
 	{ path: '*', redirect: '/home' }   /*默认跳转路由*/
 ]