Implementation of navigation guard under vue.js global routing-JS Tutorial-php.cn

Implementation of navigation guard under vue.js global routing

不言

Release： 2018-08-23 16:35:11

Original

1902 people have browsed it

The content of this article is about the implementation of navigation guards under vue.js global routing. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is a navigation guard?

In general terms, the navigation guard is a controller that controls which routes users can enter and which routes they cannot enter. It is also the controller that manages routing.

For example, when you first enter the website, When you want to write a blog, you must log in first before you can enter the blog writing; the login interface is like a route that you can enter, and the blog is a route that you cannot enter. After you log in, the controller will give you permission to enter the blog. Routing, this is the purpose of Navigation Guard

Global routing must be created under the main.js file

If you want to use Navigation GuardYou must have routing first

//main.js
const router= new VueRouter({
  routes:[
    {path:&#39;/&#39;,name:&#39;home&#39;,component:Home},
    {path:&#39;/menu&#39;,name:&#39;menu&#39;,component:Menu},
    {path:&#39;/admin&#39;,name:&#39;admin&#39;,component:Admin},
    {path:&#39;/about&#39;,name:&#39;about&#39;,component:About,redirect: {name:&#39;contactLink&#39;},children:[   //二级路由
        {path:&#39;/about/contact&#39;,name:&#39;contactLink&#39;,component:Contact},
        {path:&#39;/history&#39;,name:&#39;historyLink&#39;,component:History},
        {path:&#39;/delivery&#39;,name:&#39;deliveryLink&#39;,component:Delivery},
        {path:&#39;/orderingGuide&#39;,name:&#39;orderingGuideLink&#39;,component:OrderingGuide,redirect:{name:&#39;phonelink&#39;},children: [  //三级路由
            {path:&#39;/phone&#39;,name:&#39;phonelink&#39;,component:Phone},
            {path:&#39;/name&#39;,name:&#39;namelink&#39;,component:Name}
          ]},
      ]},
    {path:&#39;/login&#39;,name:&#39;login&#39;,component:Login},
    {path:&#39;/register&#39;,name:&#39;register&#39;,component:Register},
    {path:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});

Copy after login

Use the beforeEach() method of the routing object router above to implement the navigation guard

//main.js
//to:跳转到的路由 from:从哪个路由离开  next:显示函数
router.beforeEach((to,from,next)=>{     
  if(to.path == &#39;/login&#39; || to.path == &#39;/register&#39;){
    next();
  }else{
    alert("请先登录");
    next(&#39;/login&#39;);
  }
});

Copy after login

'/login' '/register' to define the routing address for yourself

to.path is the routing address to jump to

next() is to display the current routing content

next('/login') jumps to the specified route and displays the specified route Content

To information that can be obtained by the object (console.log(to) view)

##Related recommendations:

VueRouter 'sGuide Navigationkeeper伟How to use

Vue路Bydynamic redirection and guide Navigationkeeper卫

The above is the detailed content of Implementation of navigation guard under vue.js global routing. For more information, please follow other related articles on the PHP Chinese website!