Vue路由官方文档学习笔记

Vue路由官方文档学习笔记

Vue是一个易于上手的渐进式JavaScript框架，它可以帮助我们更方便、快捷地构建单页面应用程序（SPA）。其中，Vue Router是Vue中的一个非常重要的组件，主要用于管理整个应用程序的路由。本文将介绍Vue路由官方文档的学习笔记。

一、Vue Router入门

首先，我们需要通过npm或yarn安装Vue Router:

npm install vue-router

yarn 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。例如：

<router-link to="/" tag="li" active-class="active">Home</router-link>
<router-link to="/about" tag="li" active-class="active">About</router-link>

在上面的代码中，当当前路由和指定路由匹配时，会为该路由元素添加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路由官方文档学习笔记的详细内容。更多信息请关注PHP中文网其他相关文章！