Vue项目的一点小配置之路由

一：下载vue-router插件：npm install -s vue-router

二：引入vue-router注册路由
在router文件夹下的index.js中引入vue-router并注册路由：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from '../pages/home/home'
import Apk from '../pages/home/apk/apk'
import Login from '../pages/login/login'
import Register from '../pages/register/register'
import Error from '../pages/error/error'

export default new VueRouter({
  routes:[
    {
      path:'/home',
      name:'home',
      component:Home,
      children:[
        {
          path:'apk',
          name:'apk',
          component:Apk,
        },
        {
          path:'/',
          redirect:to => {
            return 'apk'
          }
        },
      ]
    },
    {
      path:'/login',
      name:'login',
      component:Login,
    },
    {
      path:'/register',
      name:'register',
      component:Register,
    },
    {
      path:'/',
      redirect:to => {
        return 'login'
      }
    },
    {
      path:'/error',
      name:'error',
      component:Error,
    },
    {
      path:'*',
      redirect:to => {
        return '/error'
      }
    },
  ]
})

三：在main文件中引入router


四：在vue组件中进行路由跳转
1：通过router-link来进行跳转： Home
2：通过this.$router来跳转：

this.$router.go(-1) ：代表着后退

this.$router.go(1)：代表着前进

this.$router.push({    //切换到path为home的路由
        path:'home'
       });
this.$router.push(    //切换到path为home的路由
 '/home'
);

this.$router.replace({    //切换到name为home的路由
        name:'home'
       });
this.$router.replace(    //切换到name为home的路由
 'home'
);

五：其他一点小建议
1：路由懒加载：不再一开始引入全部组件，而是按需加载路由组件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path:'/home',
      name:'home',
      component:resolve => require(['../pages/home/home'],resolve),
      children:[
        {
          path:'apk',
          name:'apk',
          component:resolve => require(['../pages/home/apk/apk'],resolve),
        },
        {
          path:'/',
          redirect:to => {
            return 'apk'
          }
        },
      ]
    },
    {
      path:'/login',
      name:'login',
      component:resolve => require(['../pages/login/login'],resolve),
    },
    {
      path:'/register',
      name:'register',
      component:resolve => require(['../pages/register/register'],resolve),
    },
    {
      path:'/',
      redirect:to => {
        return 'login'
      }
    },
    {
      path:'/error',
      name:'error',
      component:resolve => require(['../pages/error/error'],resolve),
    },
    {
      path:'*',
      redirect:to => {
        return '/error'
      }
    },
  ]
})

2:路由跳转的时候传递参数：
例如跳转时携带ID：

this.$router.push({name:"home",query:{id:JSON.stringify(id)})

在组件中获取id

this.$route.query.id

3：通过路由守卫防止非法跳转
在需要权限才能进入组件的路由在注册时应添加meta

{
      path:'/home',
      name:'home',
      meta:{requireAuth:true},
      component:resolve => require(['../pages/home/home'],resolve),
    },

在main.js全局注册路由守卫：

router.beforeEach((to,from,next)=>{
    if(to.meta.requireAuth == true){ // 判断是否需要权限进入的路由
        if(!Auth){                   // 获取不到令牌信息跳转到登录界面，令牌在此需要你自己获取来判断是否有效
            next({
                path: '/login'
            })
        }else{                       // 获取到令牌信息，跳转到对应组件
            return next();
        }
    }else{                           // 不需要权限的路由直接进行跳转
        return next();
    }
})