编程式路由导航(借助router上所携带的api)

34_src_编程式路由导航/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>
+
+
+

34_src_编程式路由导航/components/Banner.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="col-xs-offset-2 col-xs-8">
+    <div class="page-header"><h2>Vue Router Demo</h2></div>
+    <button @click="forward">前进</button>
+    <button @click="back">后退</button>
+    <button @click="test">测试一下go</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Banner",
+  methods:{
+     forward(){
+       this.$router.forward();
+     },
+     back(){
+       this.$router.back();
+     },
+     test(){
+       this.$router.go(-2);
+     }
+  }
+}
+</script>
+
+<style scoped>
+   button{
+     margin-right: 5px;
+   }
+</style>

34_src_编程式路由导航/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
+});
+
+
+

34_src_编程式路由导航/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>

34_src_编程式路由导航/pages/Detail.vue

@@ -0,0 +1,17 @@
+<template>
+   <ul>
+     <li>消息编号:{{ id }}</li>
+     <li>消息标题:{{ title }}</li>
+   </ul>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ['id', 'title']
+}
+</script>
+
+<style scoped>
+
+</style>

34_src_编程式路由导航/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>

34_src_编程式路由导航/pages/Message.vue

@@ -0,0 +1,71 @@
+<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;
+        <button @click="pushShow(m)">push查看</button>
+        <button @click="replaceShow(m)">replace查看</button>
+      </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'},
+      ]
+    }
+  },
+  methods:{
+    pushShow(m){
+      // console.log(this.$router); //router路由器 ==》管理 route路由(一系列key-value的规则)
+      this.$router.push({
+        //这里与router-link的to属性配置形式是一样的
+        name: 'particulars',
+        query:{
+          id: m.id,
+          title: m.title
+        }
+      })
+    },
+    replaceShow(m){
+       this.$router.replace({
+         //这里与router-link的to属性配置形式是一样的
+         name: 'particulars',
+         query:{
+           id: m.id,
+           title: m.title
+         }
+       })
+    }
+  }
+}
+</script>
+
+<style scoped>
+    button{
+      margin-right: 5px;
+    }
+</style>

34_src_编程式路由导航/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>

34_src_编程式路由导航/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',
+                           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
+                               }
+                           }
+                       }
+                   ],
+               }
+           ]
+       }
+   ]
+});
+

README.md

@@ -941,3 +941,32 @@ module.exports = {
 1. 作用：控制路由跳转时操作浏览器历史记录的模式
 2. 浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```
 3. 如何开启```replace```模式：```<router-link replace .......>News</router-link>```
+
+
+### 9.编程式路由导航
+
+1. 作用：不借助```<router-link> ```实现路由跳转，让路由跳转更加灵活
+
+2. 具体编码：
+
+   ```js
+   //$router的两个API
+   this.$router.push({
+   	name:'xiangqing',
+   		params:{
+   			id:xxx,
+   			title:xxx
+   		}
+   })
+   
+   this.$router.replace({
+   	name:'xiangqing',
+   		params:{
+   			id:xxx,
+   			title:xxx
+   		}
+   })
+   this.$router.forward() //前进
+   this.$router.back() //后退
+   this.$router.go() //可前进也可后退 参数是number类型(正数为前进的步数,负数为后退的部署)
+   ```