八、编程式路由导航

1、什么是编程式路由导航

就是不借助 实现路由跳转，让路由跳转更加灵活！

---

2、需求

---

3、CODE简单改造（源码请回翻上一节）

1、CommonTitle.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、Message.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

3、通过Message的pushClick看一下$router

---

4、CODE（push和replace改造）

1、Message.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2、Result

pushClick 和 replaceClick 运行结果正常

---

5、CODE（back和forward改造）

1、CommonTitle.vue

back(){
    this.$router.back()
},
forward(){
    this.$router.forward()
}
1
2
3
4
5
6

2、Result

back 和 forward 运行结果正常

3、this.$router.go()

go方法接收一个数字参数，+n就是 forward n步，-n 就是 back n步，n 为 0 时刷新当前页面

---

6、总结

1. 作用：不借助 实现路由跳转，让路由跳转更加灵活

2. 具体编码：

   //$router的两个API  [push/replace]
   this.$router.push({
      name:'xiangqing',
         params:{
            id:xxx,
            title:xxx
         }
   })
   
   this.$router.replace({
      name:'xiangqing',
         params:{
            id:xxx,
            title:xxx
         }
   })
   
   openNewWindow(id){
       let route2 = this.$router.resolve({
           name:'ourserve',    //这里是跳转页面的name
           query:{
               id:id   //要传的参数
           }
       })
       window.open(route2.href,'_blank') //打开新的页面
   },
   
   this.$router.forward() //前进
   this.$router.back() //后退
   this.$router.go(num) //可前进也可后退，传数字以达到前进后退的目的
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30