route---路由

路由

1. 理解：一个路由（route）就是一组映射关系（key–value），多个路由需要路由器（router）进行管理
2. 前端路由：key是路径，value是组件

基本使用

1. 安装vue-router，命令：npm i vue-router
2. 应用插件：Vue.use(VueRouter)
3. 编写router配置项：

// 引入VueRouter
import VueRouter from 'vue-router'
// 引入luyou组件
import About from '../vue/About'
import Home from '../vue/Homet'

// 创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes: [
        {
            path: '/about',
            component: About,
            meta: {
            isAuth: true,
            title: '天天'
          }
        },
        {
            path: '/home',
            component: Home
        }
    ]
})
// 暴露router
export default route

4. 实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

5. 指定展示位置

<router-view></router-view>

几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在componebts文件夹
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息
4. 整个应用只有一个router，可以通过组件的$router属性获取到

路由的query参数

1. 传递参数

 <!-- 跳转并携带query参数，to的字符串写法 -->
        <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`"> 跳转 </router-link>
        <!-- 跳转并携带query参数，to的对象写法 -->
        <router-link :to="{
            path: '/home/message/detail',
            query:{
                id: m.id,
                title: m.title
            }
        }
        ">跳转 
        </router-link>

2. 接收参数

$route.query.id
$route.query.title

路由的props配置

作用：让路由组件更方便的收到参数

//在路由组件中写

{
    name:'tian',
    path:'detail/id',
    component:Detail,
    //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
    //props：{a:888}
    
    //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
    //props：true
    
    //第三种写法：props值为函数，该函数返回的对象中每一组keu-value都会通过props传给Detail组件
    //props(route){
        return {
            id:route.query.id,
            title:route.query.title
        }
    }

}

<router-link>的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push
3. 如何开启replace模式：

编程式路由导航

1. 作用：不借助实现路由跳转，让路由跳转更加灵活
2. 具体编码：

//$router的两个API
  this.$router.push({
        name:'tian',
        params:{
            id: xxx,
            title:xxx
        }
    })

    this.$router.replace({
        name:'tian',
        params:{
            id: xxx,
            title:xxx
        }
    })

this.$router.forward()  //前进
this.$router.back()    //后退
this.$router.go()    //可前进也可后退

缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁
2. 具体编码
   //include指定那个组件
   
   

两个新的生命周期钩子

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2. 具体名字：
3. activated路由组件被激活时触发
4. deactivated路由组件失活时触发

Router 中提供的方法

meta:{} ===>路由元信息 (程序员所自定义信息)

路由守卫

1. 作用：对路由进行权限控制
2. 分类：全局守卫、独享守卫、组件守卫
3. 全局守卫：

// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to, from, next) => {
    if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
        if (localStorage.getItem('tiantian'==='liantian')) { //权限控制具体规则
            next()//放行
        } else {
            alert('暂无权限查看')
        }
    }else{
        next()//放行
    }
})

// 全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to, from) => {
    // to and from are both route objects.
    if (to.meta.title) {
        document.title = to.meta.title  //修改网页的title
    } else {
        document.title = 'vue_test'
    }
})

4. 独享守卫：

routes: [
        {
            path: '/about',
            component: About,
            meta: {
                isAuth: true,
                title: '天天'
            },
            // 独享守卫
            beforeEnter: (to, from, next) => {
                if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
                    if (localStorage.getItem('tiantian'==='liantian')) { //权限控制具体规则
                        next()//放行
                    } else {
                        alert('暂无权限查看')
                    }
                }else{
                    next()//放行
                }
            }
        },
        {
            path: '/home',
            component: Home
        }
    ]

5. 组件守卫：

// 进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
    // ...
}
// 离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
    // ...
}

路由器的两种工作模式

1. 对于一个url来说，什么是hash值？-------#及其后面的内容就是hash值
2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器
3. hash模式：
   a. 地址中永远带着#号，不美观
   b. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
   c. 兼容性较好
4. history模式：
   a. 地址干净、美观
   b. 兼容性和hash模式相比略差
   c. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题