vue@3.0 + vue-router@4.0 -Judge the mobile terminal and PC terminal through route interception

Posted by iandotcom on Fri, 07 Jan 2022 03:08:26 +0100

What this paper realizes is to judge whether the current device is a mobile terminal or a PC terminal through the route interception of the device. The route interception can effectively avoid the problem that refreshing the page will return to the home page during the soft route judgment. Of course, after that, it can also produce another article to judge the mobile terminal and PC terminal through the soft route. There is no more nonsense and open the whole.

You can directly pull the bottom of the article, pay attention to the official account "DataShow Chart", read the same name, and the same name of WeChat official account will be released in the end, and it can be directly used.

catalogue

Let's start with the premise:

The specific steps are as follows:

1, Initialize Vue3 project

2, In Src / router / index JS create route

3, Through router Beforeeach() does route traversal

4, Test results

Let's start with the premise:

Made two sets of codes, one for mobile terminal and one for PC terminal;
router.beforeEach needs some understanding and guidance - > Official documents
beforeEach() must call next()
The difference between next() and next("/XXXX")

The specific steps are as follows:

1, Initialize Vue3 project

vue create router-pc-mobile

Next, make relevant configuration according to your habits;

2, In Src / router / index JS create route

There are several points to pay attention to when creating a route:

Due to the two sets of codes used in this project, it is best to keep the routing format and name of PC and mobile terminals consistent, eg: "m_index" / "p_index";
You need to use route redirection redirect twice. The first time is to judge whether to enter "p_index" or "m_index" when entering the page. After entering "* _index", you need to use the second judgment "p_home" / "m_home". Later, why is there the second judgment.
Add "type: pc / mobile" in the meta of each route to judge whether the page is pc or mobile. In the later router Beforeeach is also useful.

Specific code was extracted, the official account can be moved to "DataShowChart", find the same name article, get source code:

const routes = [
  {
    path: "/",
    redirect: redirectPath,  // First redirect
  },
  {
    path: "/p_index",
    name: "p_index",
    meta: {
      label: "home page",
      type: "pc"
    },
    redirect: "p_home",  // Second redirect
    component: () =>  XXXX
    children: [
      {
        path: "/p_home",
        name: "p_home",
        meta: {
          name: "PC-home page",
          type: "pc"
        },
        component: () => XXXX
      },
    ]
  },
];

First redirect: used to determine whether the current device needs to be able to open "p_index" or "m_index". This verification judgment needs to be combined with router Beforeeach().

Second redirect: This redirect is used to display the specific path page, which can be referred to Official documents.

3, Through router Beforeeach() does route traversal

It can be roughly divided into three situations:

When the mobile terminal attempts to access the pc page
When the pc side page interview diagram accesses the mobile side page
There's nothing. Just go to next(). The official explanation is: call the callback function passed to {next} in the {beforeRouteEnter} guard, and the created component instance will be passed in as the parameter of the callback function. That is, beforeEach() must be called by next(), otherwise it may fall into an endless loop. Show the way - > Official documents.
The main difference between next() and next("XXX") is that the former (next()) does not call router again Beforeeach(), the latter (next("XXX")) will. For details, please refer to the official documents of 3.

The judgment logic of points 1 and 2 are roughly the same, except that one needs to traverse to show type = = "pc" and the other needs to traverse to show type==="mobile".

router.beforeEach((to, from, next) => {
  //When the mobile terminal attempts to access the pc page
  if (/Android |webos| iPhone |iPod| BlackBerry | iPad/i.test(navigator.userAgent) && to.meta.type != 'mobile') {  // Judge whether the type of meta in the route to which the device & & jumps is' mobile '
    const routers = router.options.routes.filter(v => v.name === 'm_index')[0].children; // Filter out M_ Routing under index
    let path = "" // Define the path address to jump to
    routers.filter((item) => { // Traverse the routing group routes just taken out
      if (item.name.split('_')[1] === to.path.split('_')[1]) { // Judge whether item is in "" The split value and the path to jump are in "" Whether the divided values are the same, this step requires that when setting the route, try to keep consistent with the format name, eg:"p_home" / "m_home"
        path = item.path
      }
    })
    if (path) { // If path has a value, jump to the path page
      next(path); 
    } else {
      next('/');
    }
  }
  // When the pc side page interview diagram accesses the mobile side page
  if (!/Android | webos | iPhone | iPod | BLackBerry | iPad/i.test(navigator.userAgent) && to.meta.type !== 'pc') {
   //... almost the same as above 
  }

  //Nothing directly next()
  next();
});