路由中使用props配置简化组件获取params,query参数

32_src_路由的props配置/App.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="row">
+      <Banner/>
+    </div>
+    <div class="row">
+      <div class="col-xs-2 col-xs-offset-2">
+        <div class="list-group">
+          <!--原始使用a标签跳转多个页面,多页面应用-->
+<!--          <a class="list-group-item active" href="./about.html">About</a>-->
+<!--          <a class="list-group-item" href="./home.html">Home</a>-->
+          <!--vue中借助router=link标签实现路由的切换-->
+<!--          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>-->
+          <router-link class="list-group-item" active-class="active" :to="{name: 'regard'}">About</router-link>
+          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
+        </div>
+      </div>
+      <div class="col-xs-6">
+        <div class="panel">
+          <div class="panel-body">
+            <!--router-view确定视图的位置-->
+            <router-view>
+            </router-view>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Banner from "@/components/Banner";
+export default {
+  name: "App",
+  components: {Banner},
+}
+</script>
+<style lang="css" scoped>
+
+</style>
+
+
+

32_src_路由的props配置/components/Banner.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="col-xs-offset-2 col-xs-8">
+    <div class="page-header"><h2>Vue Router Demo</h2></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Banner"
+}
+</script>
+
+<style scoped>
+
+</style>

32_src_路由的props配置/main.js

@@ -0,0 +1,22 @@
+//引入Vue
+import Vue from "vue";
+//引入App
+import App from './App';
+//引入vue-router
+import VueRouter from "vue-router";
+import router from './router';
+
+//关闭Vue的生产提示
+Vue.config.productionTip = false;
+
+//应用vue-router插件
+Vue.use(VueRouter);
+
+new Vue({
+    el: '#app',
+    render: h => h(App),
+    router
+});
+
+
+

32_src_路由的props配置/pages/About.vue

@@ -0,0 +1,21 @@
+<template>
+  <h2>我是About的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "About",
+  // mounted() {
+  //   console.log('Home组件挂载完毕', this);
+  //   window.aboutRoute = this.$route;
+  //   window.aboutRouter = this.$router;
+  // },
+  // beforeDestroy() {
+  //   console.log('About组件即将被销毁');
+  // }
+}
+</script>
+
+<style scoped>
+
+</style>

32_src_路由的props配置/pages/Detail.vue

@@ -0,0 +1,20 @@
+<template>
+   <ul>
+     <li>消息编号:{{ id }}</li>
+     <li>消息标题:{{ title }}</li>
+   </ul>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ['id', 'title']
+  // mounted() {
+  //   console.log(this.$route);
+  // }
+}
+</script>
+
+<style scoped>
+
+</style>

32_src_路由的props配置/pages/Home.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h2>我是Home的内容</h2>
+    <div>
+      <ul class="nav nav-tabs">
+        <li>
+          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
+        </li>
+        <li>
+          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
+        </li>
+      </ul>
+      <router-view>
+      </router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Home",
+  // mounted() {
+  //   console.log('Home组件挂载完毕', this);
+  //   window.homeRoute = this.$route;
+  //   window.homeRouter = this.$router;
+  // },
+  // // beforeDestroy() {
+  // //   console.log('Home组件将要被销毁');
+  // // }
+}
+</script>
+
+<style scoped>
+</style>

32_src_路由的props配置/pages/Message.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="m in messageList" :key="m.id">
+        <!---跳转路由并携带params参数，to的字符串写法-->
+<!--        <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>&nbsp;&nbsp;-->
+<!--        -跳转路由并携带params参数，to的对象写法-->
+        <router-link
+            :to="{
+              // path:'/home/message/detail',
+              name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置
+              //注意如果你这里使用params传递参数,不能配置path，只能配置name,一定要注意
+              query: {
+                id: m.id,
+                title: m.title
+              }
+        }">
+          {{ m.title }}
+        </router-link>&nbsp;&nbsp;
+      </li>
+    </ul>
+    <hr/>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Message",
+  data(){
+    return {
+      messageList:[
+        {id: '001', title: '消息001'},
+        {id: '002', title: '消息002'},
+        {id: '003', title: '消息003'},
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

32_src_路由的props配置/pages/News.vue

@@ -0,0 +1,17 @@
+<template>
+  <ul>
+    <li>news001</li>
+    <li>news002</li>
+    <li>news003</li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "News"
+}
+</script>
+
+<style scoped>
+
+</style>

32_src_路由的props配置/router/index.js

@@ -0,0 +1,55 @@
+//该文件专门用于创建整个应用的路由器
+
+import VueRouter from "vue-router";
+import About from "@/pages/About";
+import Home from '@/pages/Home';
+import News from "@/pages/News";
+import Message from "@/pages/Message";
+import Detail from "@/pages/Detail";
+
+//创建并默认暴露一个路由器
+export default new VueRouter({
+   routes:[
+       {
+           name: 'regard',
+           path:'/about',
+           component: About
+       },
+       {
+           path:'/home',
+           component: Home,
+           children:[
+               {
+                   path: 'news',
+                   component: News
+               },
+               {
+                   path: 'message',
+                   component: Message,
+                   children:[
+                       {
+                           name: 'particulars',
+                           path: 'detail/:id/:title',
+                           component: Detail,
+                           //props的第一种写法值为对象,该对象的所有key-value都会以props的形式传给detail组件(死数据)
+                           // props:{
+                           //     a:1,
+                           //     b:'hello'
+                           // }
+                           //props的第二种写法，值为布尔值,布尔值为真，就会把该路由组件收到的所有params(注意如果是query参数不会奏效的)参数以props的形式传递给detail组件
+                           // props: true
+                           //props的第三种写法,值为函数  $route.query.id
+                           props({ query: { id, title } }){
+                               return {
+                                   id,
+                                   title
+                               }
+                           }
+                       }
+                   ],
+               }
+           ]
+       }
+   ]
+});
+