Heim  >  Artikel  >  Web-Frontend  >  Vue leitet offizielle Dokumentstudiennotizen weiter

Vue leitet offizielle Dokumentstudiennotizen weiter

WBOY
WBOYOriginal
2023-06-09 16:06:211628Durchsuche

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有所帮助。

Das obige ist der detaillierte Inhalt vonVue leitet offizielle Dokumentstudiennotizen weiter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn