编程式导航的基本使用

编程式导航

基本介绍

导航：

​ 一个路由被执行一次，就是一次导航。导航可以分为声明式导航和编程式导航。

声明式导航：

​ router-link 可以编译生成超链接按钮，单击按钮就可以切换路由并显示对应的组件，这个过程称为“声明式导航(静态)”。

编程式导航：

​ 有时由于业务需要，一个路由被切换执行并不方便通过声明式导航实现，相反是要通过程序代码的方式给实现出来，就是“编程式导航(动态)”。

编程式导航的实现：

路由对象.push(路由地址)   // 根据路由地址执行导航
路由对象.back()  	     // 后退
路由对象.forward()       // 前进
路由对象.go(整型整数)    // 根据“整型数字”参数做路由的 前进(大于0)、刷新(等于0)、后退(小于0) 操作

灵感来自浏览器BOM对象模式

window.history.go(负数|0|正数)

window.history.back()

window.history.forward()

路由对象：

1. main.js中，就是router
2. 在组件实例中 就是 this.$router

简单使用

​ 在详情页面通过“编程式导航”，实现单击“返回”按钮回到列表页面效果。

​ src/components/Detail.vue具体实现：

<template>
    <div>
      <p><button @click="$router.back()">返回back</button></p>
      <p><button @click="$router.go(-1)">返回go</button></p>
      <p><button @click="$router.push('/movie')">返回push</button></p>
      <p>电影详情展示-----{{$route.params.mid}}</p>
    </div>
</template>