vue項目中的三種路由的方式以及路由守衛

1：這是最常見一種 route的方式

import home from "./home.vue";
import about from "./about.vue";
export default new Router({
  routes: [
		{path: '/home ',name: 'home ',component: home ,meta: {title: 'home',requireAuth:true}},
		{path: '/about ',name: 'about ',component: about ,meta: {title: '關於',requireAuth:true}},
	]
})

2：路由的懶加載方式

const login = r => require.ensure([], () => r(require('@/views/auth/login')), 'login'); //登錄
const register = r => require.ensure([], () => r(require('@/views/auth/register')), 'register'); //註冊
export default new Router({
  routes: [
		{path: '/home ',name: 'home ',component: home ,meta: {title: 'home',requireAuth:true}},
		{path: '/about ',name: 'about ',component: about ,meta: {title: '關於',requireAuth:true}},
  ]
})

3:

export default new Router({
  routes: [
		 {
	      path:'/transfer/:id',
	      name:'transfer',
	      component:()=>import('@/components/riches/transfer'),  //劃轉
	      meta:{requireAuth:true}
	    },
  ]
}}

在main.js中

router.beforeEach((to,from,next)=>{
   window.document.title=to.meta.title;
  if(to.meta.requireAuth == true){  //需要登錄權限進入的路由
    if(!localStorage.getItem('token')){  //取不到登錄信息
       return next({name:'login'})
    }else{  //取得到登錄信息，進行下一步
      return next();
    }
  }else{  //不需要登錄權限
    return next();
  }
})