Vue是一个易于上手的渐进式JavaScript框架，它可以帮助我们更方便、快捷地构建单页面应用程序（SPA）。其中，Vue Router是Vue中的一个非常重要的组件，主要用于管理整个应用程序的路由。本文将介绍Vue路由官方文档的学习笔记。
一、Vue Router入门
首先，我们需要通过npm或yarn安装Vue Router:
npm install vue-routeryarn add vue-router
登录后复制
然后，我们在main.js中引入Vue Router并将其挂载：
立即学习“前端免费学习笔记（深入）”；
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'Vue.use(VueRouter)const router = new VueRouter({ routes: [{ path: '/', component: Home }]})new Vue({ router, render: h => h(App),}).$mount('#app')
登录后复制
其中，我们通过Vue.use()方法将Vue Router注册到Vue中，然后创建了一个新的VueRouter实例，并设置了路由规则。在最后，我们把VueRouter实例挂载到Vue实例上。
接下来，我们需要给路由规则设置相应的组件，例如：
import Home from './views/Home.vue'import About from './views/About.vue'const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ]})
登录后复制
在上面的代码中，我们引入了Home和About组件，并在路由规则中使用了它们。当访问根路径时，会渲染Home组件，而当访问/about路径时，则会渲染About组件。
二、路由跳转
在使用Vue Router的过程中，我们经常会需要进行路由跳转。Vue Router提供了多种方式来实现路由跳转，例如：
1.通过$route对象实现
我们可以在组件中通过$route对象来实现路由跳转，例如：
this.$router.push('/about')
登录后复制
2.通过$route.linkActive class实现
当我们在页面中需要为当前选中的路由添加一个特定的样式时，可以使用$route.linkActive class。例如：
HomeAbout
登录后复制
在上面的代码中，当当前路由和指定路由匹配时，会为该路由元素添加active样式。
3.通过编程式导航实现
在某些情况下，我们需要在JavaScript代码中进行路由跳转，例如表单提交后跳转到指定页面。此时，可以使用编程式导航来实现路由跳转，例如：
// 使用命名路由跳转this.$router.push({ name: 'about' }) // 使用路由参数跳转this.$router.push({ path: '/user/123' })
登录后复制
三、路由组件传递参数
在实际开发中，我们经常需要将一些参数从一个路由组件传递到另一个路由组件。Vue Router提供了多种方式来实现路由组件传递参数，例如：
1.通过$route对象实现
当我们需要在路由组件中获取路由参数时，可以使用$route.params对象，例如：
// 定义路由规则const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ]})// 在组件中获取路由参数export default { methods: { goToUser(id) { // 参数传递方式1 this.$router.push('/user/' + id) // 参数传递方式2 this.$router.push({ path: '/user/' + id }) // 参数传递方式3 this.$router.push({ name: 'user', params: { id }}) } }}// User组件中获取路由参数export default { created() { const id = this.$route.params.id }}
登录后复制
2.通过query参数实现
query参数是一种比较灵活的传参方式，它可以将参数直接拼接在URL后面进行传递，例如：
this.$router.push({ path: '/user', query: { id: 123 }})// User组件中获取query参数export default { created() { const id = this.$route.query.id }}
登录后复制
四、路由钩子函数
Vue Router提供了多种路由钩子函数，可以帮助我们在路由变化时执行不同的操作。例如，我们可以在进入组件之前检查用户登录状态，或者在路由变化时进行页面跳转等操作。
1.全局路由钩子函数
全局路由钩子函数会在整个应用程序中的路由变化时都触发，例如：
const router = new VueRouter({ routes: [...],})// 全局前置守卫router.beforeEach((to, from, next) => { // 判断用户是否登录 if (to.meta.requireAuth && !store.state.isUserLogin) { next({ path: '/login' }) } else { next() }})// 全局后置钩子router.afterEach((to, from) => { // 页面跳转统计 statistics(to.path)})
登录后复制
在上面的代码中，我们通过router.beforeEach()方法定义了一个全局前置守卫，用于判断用户是否登录，如果未登录则跳转到登录页面。在全局后置钩子中可以进行一些统计或其他操作。
2.组件内路由钩子函数
除了全局路由钩子函数，Vue Router还提供了一些组件内的路由钩子函数，例如beforeRouteEnter、beforeRouteLeave和beforeRouteUpdate。例如，我们可以在beforeRouteEnter钩子函数中获取组件实例并进行一些初始化操作，例如：
export default { beforeRouteEnter(to, from, next) { // 获取组件实例 const vm = this // 发起异步请求 getAsyncData().then(response => { // 将数据保存到组件的data中 vm.data = response.data // 继续路由跳转 next() }) }}
登录后复制
在上面的代码中，我们在组件进入路由时触发了beforeRouteEnter钩子函数，在获取异步数据后将数据保存到组件的data中，并通过next()方法继续路由跳转。
总结：
本文主要介绍了Vue Router官方文档的学习笔记，包括Vue Router的入门、路由跳转、路由组件传递参数和路由钩子函数等方面。希望对大家在Vue开发中使用Vue Router有所帮助。
以上就是Vue路由官方文档学习笔记的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3229619.html
