vue-router

路由：一个路由就是一组映射关系，key为路径，value可能是组件或者函数。也就是路径与组件或者函数之间的映射关系

vue-router是vue的一个插件，可以用来实现SPA单页面应用的切换

1.创建路由

在src下创建router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'  //导入路由对象
import login from '@/views/login' //需要引入组件

Vue.use(VueRouter)  //添加vue.use()身上

*// 创建路由规则数组*
const routes = [
 {
  *// 登录页面路由路径*
  path: '/login',
  name:'login',
  component: () => import('@/views/login') //组件名
  *// #这里是路由懒加载的写法*
  *// #完整写法是：@/views/login/index.vue，但是index.vue可以省略，导入一个目录时默认导入目录下的index.vue*
  *// # @符号指的是项目的src目录*
  *// component: login  这个是传统写法，加载速度慢,因为是加载的时候会全部都加载，所以较慢*
      children:[
     //嵌套路由或者叫多级路由
     ]  

 },
]
//生成路由对象用规则
const router = new VueRouter({
 routes
})

//向外导入路由对象
export default router

2把路由对象注入到new vue（） 实例中，进入main.js

new Vue({
 router, //注入路由对象
 store,
 render: *h* => h(App)
}).$mount('#app')

3.在那个界面使用就在那个界面设置

<router-view > </router-view>

2.基本路由切换

<router-link    to="./home"> </router-link>  点击切换界面
//这个渲染到界面还是a标签

1.router-link的replace属性：替换掉当前占用的那一条，浏览器历史记录中始终只有一条，再开启这个属性模式时，浏览器左上角可以观察到前进后退按键无效了

<router-link  replace   to="./home"> </router-link>  点击切换界面
//这个渲染到界面还是a标签

默认情况下，开启的是push模式

2几个注意点：被切换后的组件都被销毁了 ，切换过程就是挂载和销毁的过程，

​ 每个组件都有自己的$route属性，里面存储着自己的路由信息

​ 整个应用只有一个router，可以通过组件的$router属性获取

3.嵌套路由

在创建的路由规则中配置children:[ 路由规则 ],例子如下

// 路由规则数组*
const routes = [
 {
  *// 登录页面路由路径*
  path: '/login',
  name:'login',//路由的名字，起名一定要见名知意
  component: () => import('@/views/login') //组件名
  children:[
     //嵌套路由或者叫多级路由
      path: 'home',  //路径名称不用在加斜杠“/”
      name:'home',
      component: () => import('@/views/home') //组件名
     ]  
 },
]

4.路由传参

1.query参数

问号后面的就是query参数

跳转路由，to字符串写法
<router-link    to="/home?id=2&name="hahh"> </router-link>

跳转路由，to对象写法，（推荐使用对象写法）
<router-link    to="{
path:"/home"
query:{
    id:2
    name:"hahh" //实践中大多写变量，这里展示就写了常量
}
}"> </router-link>

取出参数 的方法

$route.query.id //在使用的地方使用即可

2.params参数

跳转路由，to字符串写法
<router-link    to="/home/2/hahh> </router-link> 
跳转路由，to对象写法，（推荐使用对象写法）
<router-link    to="{
//path:"/home"
name:"home"  //使用to对象写法，就不能使用path配置项了，必须使用name配置。
params:{
    id:2
    name:"hahh" //实践中大多写变量，这里展示就写了常量
}
}"> </router-link>

特别注意路由携带params参数的时候，使用to对象写法，就不能使用path配置项

了，必须使用name配置。

这样传值需要提前在路由规则路径path中占位,如下：

// 路由规则数组*
const routes = [
 {
  *// 登录页面路由路径*
  path: '/login',
  name:'login',//路由的名字，起名一定要见名知意
  component: () => import('@/views/login') //组件名
  children:[
     //嵌套路由或者叫多级路由
      path: 'home/:id/:name',  //使用占位符声明接收params参数
      name:'home',
      component: () => import('@/views/home') //组件名
     ]  
 },
]

3.路由的props配置

在路由规则中props的三种配置方法：

// 路由规则数组*
const routes = [
 {
  *// 登录页面路由路径*
  path: '/login',
  name:'login',//路由的名字，起名一定要见名知意
  component: () => import('@/views/login') //组件名
第一种写法：值为对象，对象中的值会以prop的形式传给组件，使用较少，传递的是死数据   
  props:{
  	id:1,
    name:nihao
  }
第二种写法：当布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给组件
    props:true
第三种写法：值为函数,返回值必须是对象,推荐使用这种
    props($route){
        retuen {
            id:$route.query.id,
               }
    }
    
 },
]

在组件中使用props接收：

<script>
    export default {
     name:"组件名"，
     props:['id','name'] 
}
</script>

5.编程式路由导航

应用场景：由于router-link编译后是a标签，当我们需要编译后标签是其他的，如button的时候，可以采用这种方式，不借助router-link的路由导航,，点击按钮，切换路由

通过$router中的push和replace来实现**

<template>
<div>
    <button @click="pushShow"> 按钮</button>
 </div>
</template>

<script>
    export default {
     methods:{
         pushShow(){
           this.$router.push({
               //跟声明式一样，也可以传值
               name:'home',
               query:{
                   id:1,
                   name:hah
               }
           })  
         }
     }
}
</script>

常用路由$router方法：后退：back（） ，前进：forward（） ，go（传入参数正数 3前进三步，负数-3，后退三步）

6.缓存路由组件

路由切换后，组件被销毁，我们想缓存一些组件,

<template>
<div>
    //要写include，不写的话就会缓存这个路由挂载点的所以组件
    <keep-alive :include ="["要缓存的组件名","要缓存的组件名"]">
        <router-view > </router-view>
    <keep-alive>
 </div>
</template>

7.路由下组件独有的两钩子函数

//激活：当组件切换显示出来的时候
activated(){

}
//失活：当组件被切换走看不见的时候
deactivated(){

}
可以在这两种状态下做一些事情
//nextick(){}

8.路由守卫

路由守卫：对路由进行权限控制 ，

分类有：全局守卫，独享守卫，组件内守卫

1.全局守卫

1.全局前置路由守卫

切换前鉴权

import Vue from 'vue'
import VueRouter from 'vue-router'  //导入路由对象
import login from '@/views/login' //需要引入组件

Vue.use(VueRouter)  //添加vue.use()身上
*// 创建路由规则数组*
const routes = [
   {
  path: '/login',
  name:'login',
  component: () => import('@/views/login') //组件名
       //路由元信息，可以自定义
  meta:{
       isAuth:false //用来判断这个路由需不需要做权限判断，在不需要做权限校验的路由可以不写，只在需要的写，值为true就可以
   }
 },
]
//生成路由对象用规则
const router = new VueRouter({
 routes
})

//全局前置路由守卫，在路由切换之前就调用,还有就是在初始化的时候会调用一次
//to表示去哪里，From是从哪里来，next
router.beforeEach((to,From,next)=>{
   // 。。。。。。在这里判断要不要放行：例子如下;
    //通过to.path判断path或者name,是不是要守卫的路由，不是的话直接放行
    if(to.meta.isAuth){
        if(to.path ==='/home/news' || to.path ==='/home/message' ){
        //如果是在判断token是否符合，或者其他条件是否符合
        if(localStorage.getItem('school') === 'atguigu'){
            next() //不写这个不会放行
        }else{
            conlse.log('您没有权限查看此页面')
        }
    }else{
        next()
    }
    }
})
//向外导入路由对象
export default router

2.全局后置路由守卫

import Vue from 'vue'
import VueRouter from 'vue-router'  //导入路由对象
import login from '@/views/login' //需要引入组件

Vue.use(VueRouter)  //添加vue.use()身上
*// 创建路由规则数组*
const routes = [
   {
  path: '/login',
  name:'login',
  component: () => import('@/views/login') //组件名
       //路由元信息，可以自定义
  meta:{
       isAuth:false //用来判断这个路由需不需要做权限判断，在不需要做权限校验的路由可以不写，只在需要的写，值为true就可以
       title:"主页"  //后置路由获取，可以改变网页标题
   }
 },
]
//生成路由对象用规则
const router = new VueRouter({
 routes
})

//全局后置路由守卫，在路由切换之后就调用,还有就是在初始化的时候会调用一次
//to表示去哪里，From是从哪里来，后置没有next
//能来到这里，就代表通过了前置路由守卫权限
router.afterEach((to,From)=>{
  
})
//向外导入路由对象
export default router

2.独享路由守卫

独享路由守卫是在在路由规则内进行配置，只想对一个路由进行限制，一个路由独享的意思。独享路由守卫只有前置，没有后置，可以和全局后置配合使用，例子如下;

import Vue from 'vue'
import VueRouter from 'vue-router'  //导入路由对象
import login from '@/views/login' //需要引入组件

Vue.use(VueRouter)  //添加vue.use()身上
*// 创建路由规则数组*
const routes = [
   {
  path: '/login',
  name:'login',
  component: () => import('@/views/login') //组件名
  //独享路由守卫 beforEnter,其他与全局前置路由守卫一样
     beforeEnter((to,From,next)=>{
			.....
    })  
 },
]
//生成路由对象用规则
const router = new VueRouter({
 routes
})
//向外导入路由对象
export default router

3.组件内守卫

不在路由配置文件内写了，在组件内去写，通过路由规则进入该组件时被调用，一定是通过路由规则进入的才会

<template>
<div>
 </div>
</template>
<script>
    export default {
     methods:{},
     //通过路由规则，进入该组件时被调用
         beforeRouterEnter(to,from,next){
             
         }
      //通过路由规则，进入该组件时被调用
         beforeRouterLeave(to,from,next){
             
         }

         
}
</script>

9.history模式和hash模式

明天会进行更新，今天太晚了