前端vue入门(纯代码)32_编程式路由导航

星光不问赶路人，时光不负有心人

【30.Vue Router--编程式导航】

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 $router 的实例方法，通过编写代码来实现。

编程式路由导航的5种方法

我们先看一下组件实例中的this.$router都有哪些好用的api:【部分截图】

1.push【导航到不同的位置,添加一条新的历史记录】

注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，可以使用 $router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 $router.push(...) ：

声明式	编程式
<router-link :to="...">	$router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
$router.push('/users/eduardo')

// 带有路径的对象
$router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
$router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
$router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
$router.push({ path: '/about', hash: '#team' })

2.replace【替换当前位置】

• replace ：删掉上一条历史记录，并把本记录添加到history栈中。

它的作用类似于 $router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

声明式	编程式
<router-link :to="..." replace>	$router.replace(...)

也可以直接在传递给 $router.push 的 routeLocation 中增加一个属性 replace: true ：

$router.push({ path: '/about', replace: true })
// 相当于
$router.replace({ path: '/about' })

this.$router.replace({
    // name: 'xiangqing',
    path:'/home/stars/detail',
    //传参
    query: {
        title: s.title,
        works: s.works,
},
})

法一：<router-view> + 声明式：<router-link :to=" ....">

法二：<router-view> + 编程式：this.$router.xxx

3.go(n)【横跨历史】

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。

例子

// 向前移动一条记录，与 $router.forward() 相同
$router.go(1)

// 返回一条记录，与 $router.back() 相同
$router.go(-1)

// 前进 3 条记录
$router.go(3)

// 如果没有那么多记录，静默失败
$router.go(-100)
$router.go(100)

4、forward【前进】

this.$router.forward() 前进，前进到下一次的历史记录（相当于浏览器的→按钮）

this.$router.forward() //在组件实例中调用

5、back【后退】

this.$router.back() 后退，后退到上一次的历史记录（相当于浏览器的←按钮）

this.$router.back()

• 【注意】：在组件实例中调用以上方法，都得加上this【例如：this.$router.go(1)】

我们看一下地址栏【初始：localhost:8080/#/】，页面结果展示：

• 第1步：点击–About，localhost:8080/#/about,【默认：push】
• 第2步：点击–Home，localhost:8080/#/home,【默认：push】
• 第3步：点击–喜欢的三部动漫，localhost:8080/#/home/cartoon，【设置了replace：替换掉第2步】
• 第4步：点击–喜欢的三个明星，localhost:8080/#/home/stars,【设置了replace：替换掉第3步】
• 第5步：点击–周星驰，http://localhost:8080/#/home/stars/detail?title=周星驰&works=《功夫》,【跳转到detail，并携带参数】
• 第6步：点击–测试push并跳转到detail，http://localhost:8080/#/home/stars/detail，【跳转到detail，但是未携带参数】
• 第6步：点击–测试replace并跳转到About，localhost:8080/#/about,【跳转到第1步】

后续等vue2-3所有基础知识学完后，整个学习笔记的代码会上传到github