vue-router project practice (detailed tutorial)

vue-router is the official routing library of Vue.js. This article mainly introduces the practical summary of the vue-router project. Friends who need it can refer to it

Let’s talk about the vue project today{ vue,vue-router,component} vue-router, one of the three great generals. As one of our important practices for front-end and back-end separation, router helps us complete page jumps between SPA applications.

And, with third-party libraries like axios, we can implement interceptor functions that work with the background interface.

For a small project, it is enough that the router folder contains a router.js.

However, when we have a lot of pages, we need to divide them into Come out two files: one defines our routes and components, and the other instantiates the components and mounts the route to the vue instance.

I won’t go into details about the basic usage. You can check out the official website of vue-router. If you read it carefully, there will definitely be no problem with basic usage.

1. Why does my routing not work?

A very important point here is when we construct an instance of VueRouter Sometimes, there is a problem with the parameters passed in.

import routes from '@/router/router'
const router = new VueRouter({
 routes // （ES6语法）相当于 routes: routes
})
new Vue({
 router
}).$mount('#app')

If what you introduce here is not routes, you have to write it in the following way.

import vRoutes from '@/router/router'
const router = new VueRouter({
 routes :vRoutes 
})
new Vue({
 router
}).$mount('#app')

2. Implement lazy loading of components based on webpack in routing

For our vue projects, we basically use webpack for packaging Yes, if there is no lazy loading, the packaged files will be abnormally large, resulting in a white screen on the homepage and serious delays, which is not conducive to the user experience. Lazy loading can be used to divide the page, and webpack packages different components into many Small js file. Load asynchronously when needed to optimize the user experience. In other words, only one or two of 100 users may enter some pages, so why spend traffic on it.

import App from '@/App.vue'
const index = r => require.ensure([], () => r(require('@/pages/index/index')), 'index')
export default [{
 path: '/',
 component: App,
 children: [
  {
    path: '/index',
    name:'index',
    component: index
  }]
}]

If a component contains nested routes, we can also package the two routes into a js chunk.

// 这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件
const orderUser= r => require.ensure([], () => r(require('@/pages/order/user')), 'order')
const payRecord= r => require.ensure([], () => r(require('@/pages/order/payRecord')), 'order')

3.Router mode

For browsers, our router is divided into two modes.

1.hash mode (default)

According to the basic structure of a uri, the hash mode is processed in a basic URI fragment. If we put aside SPA, the more common application scenario is that when we are building a PC mall, there will be tab switching such as product details, comments, and product parameters. We can use the a tag with the ID, and add a little movement. The special effects are very good.

This is also the routing method used by router by default. However, this method has a drawback, that is, when connecting to a third-party payment, we pass in a URL to the third-party payment as a callback address, but after the payment is completed, some third-party payment will transfer our # As an interception symbol, only the url content before the first # symbol is retained, and the corresponding callback parameters are added later. As a result, after the payment is completed, it cannot jump to the corresponding payment page

Incoming url:

http://xx.xx.com/#/pay/123

Address after callback:

http://xx.xx.com/pay/123?data=xxxxx%xxxx

2.history mode

There is also a history mode. It uses h5's history.pushState to complete the URL jump. The advantage of using this method to handle jumps is that the URL is no different from what we usually see. If compared with the hash mode, there is no #. However, when using history mode, we also need to do corresponding processing in the background, because if we directly access an address, such as http://www.xxxx.com/user/id, if the backend is not configured, then The client will return a 404 page.

4.router-link is in the loop this.Parameter name=undefined

 <router-link tag="li" :to="{path:`/user/${item.userID}`}" v-for="(item, index) in userList" :key="index">
   //含有固定的值
  <p>{{this.foo}}</p>
  <p>{{foo}}</p>
 </router-link>
data(){
  return {
    foo:&#39;bar&#39;,
  } 
}

router.beforeEach((to, from, next) => {
 const NOW = new Date().getTime();
 if (to.matched.some(r => r.meta.requireAuth)) {
  if(NOW > store.state.deadLine){
   store.commit('CLEAR_USERTOKEN')
  }
  if (store.state.message.login === true) {
   next();
  }
  else {
   next({
    path: '/login',
    query: {redirect: to.fullPath}
   })
  }
 }
 else {
  next();
 }
})

import router from '@/router/routes'
axios.interceptors.response.use(
 success => {
  switch (success .code) {
   case -100:
    router.replace({
     path: 'login',
     query: {redirect: router.currentRoute.fullPath}
    })
    console.warn('注意,登录已过期!')
    break;
  }
  return success;
 },
 error => {
   switch (error.code) {
    case 404:
     console.warn('请求地址有误或者参数错误!')
    break;
   }
  return Promise.reject(error.response.data)
 });