路由的详细用法：

说明：routes里面全部是我们预先设计好的一些路由，相当于静态路由

1.利用component:()=>import('....')这种方式引入的组件方式，npm run build的时候咋dist文件夹中会生成一个 a.js，b.js，c.js使用懒加载的方式加载组件

2.想在哪里展示这个路由，就要在哪个组件中写上这个标签

3.因为在写a.vue这个组件理由的时候写了children这个属性，要想children里面的组件展示就要在a.vue这个组件中写上

当你访问.../aa的时候就会展示页面为：

$router与$ route的区别：

路由传参有两种方式：query、params

区别:

1.query:在路径上可以看到，params看不到

2.query参数不会因为刷新页面而消失，params会消失 3.如果想params方式传参刷新页面参数不消失，可以在路由配置里面进行配置，其实跟query传参类似了只不过表现形式不太一样，query:xxx/?value=xxxxx,params:xxx/value/xxxx

4.用path方式访问的时候不能用params传参 5.如果想跟普通链接一样打开新的标签页，需要这样写

路由钩子函数

1.全局钩子函数（进入到整个网站调用）

1)beforEach((to,from,next)=>{})

2)afterEach((to,from)=>{})

2.组件钩子函数（进入到某个组件调用）

1)beforeRouteEnter((to,from,next)=>{})

//不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

2)beforeRouteUpdate((to,from,next)=>{})

3)beforeRouteLeave((to,from,next)=>{})

动态添加路由

import router from '../router/index'//引入router
import store from '../store/index'//引入store
import {staticRouter,asyncRouter} from './data'

const routes=staticRouter//用一个变量存储静态路由
export default function addRoute(){
    try{
        //1.判断是否登录了并且store里面存储了
        if(store.state.is && store.state.routerArr.length===4){
            console.log('已登录');
            setTimeout(()=>{
                let data=asyncRouter
                data.forEach(item=>{
                    routes.push({
                        path:item.path,
                        meta:item.meta,
                        component:()=>import(`@/views/dr/${item.component}`)
                    })
                })
                console.log(data);
               data.forEach(item=>{
                router.addRoute(item)
               })
            },1000)
        }else{
            console.log('未登录');
            store.dispatch('updateStoreRouter',staticRouter)
        }
    }catch(err){
        console.log(err);
    }
}

//静态路由
export const staticRouter=[
    {
        path:'/',
        component:()=>import('@/views/dr/1.vue'),
        meta:{
            title:'1'
        }
    },
    {
        path:'/2',
        component:()=>import('@/views/dr/2.vue'),
        meta:{
            title:'2'
        }
    },
    {
        path:'/3',
        component:()=>import('@/views/dr/3.vue'),
        meta:{
            title:'3'
        }
    },
    {
        path:'*',
        redirect:'/',
        meta:{
            title:'错误',
            aaa:'hidden',
        }
    }
]
//动态理由
export const asyncRouter=[
    {
        path:'/4',
        component:()=>import('@/views/dr/4.vue'),
        meta:{
            title:'4'
        }
    },
    {
        path:'/5',
        component:()=>import('@/views/dr/5.vue'),
        meta:{
            title:'5'
        }
    },
    {
        path:'/6',
        component:()=>import('@/views/dr/6.vue'),
        meta:{
            title:'6'
        }
    }
]

import Vue from 'vue'
import Vuex from 'vuex'

import inner from './modules/inner.js'
import innertwo from './modules/innertwo.js'

Vue.use(Vuex)

const store=new Vuex.Store({
  state:{
    is:false,//是否登录过
    routerArr:[],//静态路由+动态路由
  },
  mutations:{
    CHANGEID(state,palyod){
      state.is=palyod
    },
    STOREROUTER(state,palyod){
      state.routerArr=palyod
    }
  },
  actions:{
    updateChangeId({commit},value){
      commit('CHANGEID',value)
    },
    updateStoreRouter({commit},value){
      commit('STOREROUTER',value)
    }
  },
  getters:{
    // isId(){
    //   return state.is
    // },
    // routerArr(){
    //   return state.routerArr
    // }
  },
  modules:{
    inner,
    innertwo
  },
})

export default store

<template>
  <div class="hello">
    <template v-for="item in routerData" >
      <div v-if="!item.meta.aaa">
        <router-link :to="item.path">
          {{item.meta.title}}
        </router-link>
      </div>
    </template>
    <router-view></router-view>
    <button @click="handleLogin">登录</button>
    <button>退出</button>
    
  </div>
</template>

<script>
import addRoute from '@/utils/dataMethed'
export default {
  name: 'HelloWorld',
  props: {},
  watch:{
    routerData:{
      handler(nv){
        this.routerData=nv
      },
      // immediate:true,
    }
  },
  created(){
    addRoute()
    this.routerData=this.$store.state.routerArr
  },
  data(){
    return {
      routerData:[]//未登录时候得路由
    }
  },
  methods:{
    //登录
    handleLogin(){
      this.$store.dispatch('updateChangeId',true)
      addRoute()
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

vue-router总结

路由钩子函数

动态添加路由