Vue-router小结

学习概述

• Vue-router之前就是学过了，也是会基本的使用，但是感觉太久没有怎么用了不熟练了，有些细节也是忘记了。* 前几天用了，主要是用this.$router.push() 方法和<router-link>,然后再router的index.js里面有些路由有些地方也是没有写好。只是能够简单地用，有些做法没有考虑清楚。今天有机会重新学习一下，就是要好好捡起之前的记忆。学习的知识如下:

Vue-router 概述

声明式导航&编程式导航

• 在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如： 普通网页中点击 <a> 链接，vue 项目中点击 <router-link> 都属于声明式导航* 在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如： 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航#### 编程式导航API

vue-router 提供了许多编程式导航的API，其中最常用 的导航 API 分别是：

• this.$router.push('hash地址') 跳转到指定 hash 地址，并增加一条历史记录
• this.$router.replace('hash地址') 跳转到指定的 hash 地址，并替换掉当前的历史记录
• this.$router.go(数值n) 实现导航历史前进、后退

$router.push

通过 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。示例代码如下

<template><div><h3>Home组件</h3><button @click="gotoMovie"> 跳转到Movie页面</button></div>
</template>

<script> export default {name: "Home",methods: {gotoMovie() {this.$router.push('/movie')}}
} </script>

<style scoped>

</style> 

$router.replace

调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。

push 和 replace 的区别：

• push 会增加一条历史记录
• replace 不会增加历史记录，而是替换掉当前的历史记录

$router.go

调用 this.$router.go() 方法，可以在浏览历史中前进和后退，示例代码如下：

<template><div><h3>Home组件</h3><button @click="goBack"> 后退 </button></div>
</template>

<script> export default {name: "Home",methods: {goBack(){// 后退到之前的组件页面this.$router.go(-1)}}
} </script>

<style scoped>

</style>
// 注意，一般只会前进和后退一层页面，因此 vue-router 提供了如下两个便捷方法：

1.`$router.back()`- 在历史记录中， 后退到上一个页面

2.`$router.forward()`- 在历史记录中， 前进到下一个页面 

认识vue-router

目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router 我们的重点是vue-router，vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。我们可以访问其官方网站对其进行学习：router.vuejs.org/zh/

vue-router是基于路由和组件的

• 路由用于设定访问路径, 将路径和组件映射起来
• 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换

使用 vue-router 的步骤

1.创建路由组件
2.配置路由映射：组件和路径映射关系
3.使用路由: 通过`<router-link>`和`<router-view>` 声明路由链接和占位符

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码： 

如果我们在使用 vueCLI 初始化项目的时候安装了 router，那么就会自动生成 router 文件夹，里面有 index.js 如下

// 1.导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.调用 Vue.use() 函数,把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3.创建 VueRouter 对象
const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: () => import(/* webp ackChunkName: "about" */ '../views/About.vue')}
]

const router = new VueRouter({// 配置路由和组件之间的应用关系routes
})
// 4.将 router 对象传入到 vue 实例
export default router 

在 src/ main.js 入口文件中，导入并挂载路由模块。示例代码如下：

import Vue from 'vue'
import App fro