Vue routing official document study notes

Vue routing official document study notes

Vue is an easy-to-use progressive JavaScript framework that can help us build single-page applications (SPA) more conveniently and quickly. Among them, Vue Router is a very important component in Vue, mainly used to manage routing of the entire application. This article will introduce the study notes of Vue routing official documentation.

1. Getting started with Vue Router

First, we need to install Vue Router through npm or yarn:

npm install vue-router

yarn add vue-router

Then, we introduce Vue Router in main.js and add it Mounting:

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')

Among them, we registered the Vue Router into Vue through the Vue.use() method, then created a new VueRouter instance and set the routing rules. At the end, we mount the VueRouter instance to the Vue instance.

Next, we need to set the corresponding components for the routing rules, for example:

import Home from './views/Home.vue'
import About from './views/About.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

In the above code, we introduced the Home and About components and used them in the routing rules . When the root path is accessed, the Home component is rendered, and when the /about path is accessed, the About component is rendered.

2. Route Jump

In the process of using Vue Router, we often need to perform route jump. Vue Router provides a variety of ways to implement route jumps, such as:

1. Through the $route object

We can implement route jumps through the $route object in the component, for example ：

this.$router.push('/about')

2. Implemented through $route.linkActive class

When we need to add a specific style to the currently selected route on the page, we can use $route.linkActive class. For example:

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

In the above code, when the current route matches the specified route, the active style will be added to the route element.

3. Implementation through programmatic navigation

In some cases, we need to perform routing jumps in JavaScript code, such as jumping to a specified page after a form is submitted. At this time, you can use programmatic navigation to implement routing jumps, for example:

// 使用命名路由跳转
this.$router.push({ name: 'about' })
  
// 使用路由参数跳转
this.$router.push({ path: '/user/123' })

3. Passing parameters from routing components

In actual development, we often need to transfer some parameters from a routing component Passed to another routing component. Vue Router provides a variety of ways to pass parameters in routing components, for example:

1. Through the $route object

When we need to obtain routing parameters in the routing component, we can use $ route.params object, for example:

// 定义路由规则
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. Implemented through query parameters

Query parameters are a more flexible way to pass parameters. It can directly splice the parameters behind the URL and pass them. For example:

this.$router.push({
  path: '/user',
  query: { id: 123 }
})

// User组件中获取query参数
export default {
  created() {
    const id = this.$route.query.id
  }
}

4. Routing hook function

Vue Router provides a variety of routing hook functions that can help us perform different operations when routing changes. For example, we can check the user login status before entering the component, or perform page jumps when routing changes.

1. Global routing hook function

The global routing hook function will be triggered when routing changes in the entire application, for example:

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)
})

In the above code, We define a global front guard through the router.beforeEach() method to determine whether the user is logged in. If not, jump to the login page. Some statistics or other operations can be performed in global post hooks.

2. In-component routing hook function

In addition to the global routing hook function, Vue Router also provides some routing hook functions within the component, such as beforeRouteEnter, beforeRouteLeave and beforeRouteUpdate. For example, we can get the component instance in the beforeRouteEnter hook function and perform some initialization operations, such as:

export default {
  beforeRouteEnter(to, from, next) {
    // 获取组件实例
    const vm = this
    
    // 发起异步请求
    getAsyncData().then(response => {
      // 将数据保存到组件的data中
      vm.data = response.data
      
      // 继续路由跳转
      next()
    })
  }
}

In the above code, we triggered the beforeRouteEnter hook function when the component enters the route. After getting the asynchronous data Save the data to the component's data and continue routing through the next() method.

Summary:

This article mainly introduces the study notes of Vue Router official documentation, including getting started with Vue Router, routing jumps, routing component passing parameters and routing hook functions, etc. I hope it will be helpful for everyone to use Vue Router in Vue development.

The above is the detailed content of Vue routing official document study notes. For more information, please follow other related articles on the PHP Chinese website!