学习概述
- 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