关于Vue的路由配置和前置守卫

一：路由配置

基本使用:安装npm i -S vue-router

//app.vue

  <div id="app">
      <!--  路由入口 指定跳转到只定入口 -->
      <router-link to="/home">首页</router-link>
      <router-link to="/login">登录</router-link>
    
      <!--  路由出口：用来展示匹配路由视图内容 -->
      <router-view/>
    </div>

//router.js
    引入被配置的文件
    import Home from '../views/Home.vue'
    设置路由路径
    const routes=[{
    path:'/',
    name:'Home',
    component:Home
    },
    {
    path:'/about',
    name:'About',
    在组件里引入路径，则不需要import配置
    component:()=>import('../views/About.vue')
    }
    ],
    
    //新建一个路由
    const router = new VueRouter({
    
    //history 可以达到隐藏地址栏hash值
    mode: 'history',
    base: process.env.BASE_URL,
    //把路由数组都放进去
    routes
    })
    //把路由导出
    export default router
    

//main.js
import router from './router'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

配置路由路径的另一个方法： 重定向

{ path: '/', redirect: '/Home' }

二.前置守卫

（1）全局前置守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => { // ... })

首先解释一下守卫里的三个参数，

to：为要去往的目标
from：导航即将要离开的目标
next：放行，
next()//传递到任意位置