20230426----重返学习-vue-router路由

day-058-fifty-eight-20230426-vue-router路由

vue-router路由

路由：切换页面，单页面应用上使用的
hash模式—锚点

对应vue版本

• 如何使用路由版本
  • vue2 —> router3
  • vue3 —> router4

使用vue-router

1. 创建项目的时候，直接选中路由

   1. src目录下面多了一个router文件夹，index.js上写好了基础模板

   2. 在main.js中导入，挂载

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

2. 创建项目的时候，没有选中路由

   1. 安装vue-router

      npm install vue-router@3//vue2对应的vue-router版本3
      //npm install vue-router@4//vue3对应的vue-router版本4
      

   2. 接下来自己在src目录下创建router文件夹， index.js 写基础模板

   3. 在main.js中导入，挂载

路由配置属性

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({//路由属性routes:[],// routes:routes//mode:"history"//mode:"hash" 默认是hash
})
export default router

路由配置规则

import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
Vue.use(VueRouter);
// 路由配置规则
const routes = [{path: "/", //路由路径name: "home", //命名路由//展示的组件页面--静态组件（缓存）component: HomeView, //展示的组件页面},{path: "/about",name: "about",//展示的组件页面--路由懒加载component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),//注释的含义，在打包时定义的webpack区块chunk的名称。同一个名称的，在打包时会打包到一起，共用一块},{path: "/InfoView",name: "InfoView",component: () => import(/* webpackChunkName: "InfoView" */ "../views/InfoView.vue"),},
];
const router = new VueRouter({// 路由配置属性routes,// mode: "history",//历史模式// mode:'hash',//默认是hash
});
// vue路由实例对象
console.log(`router-->`, router);
export default router;

路由页面展示

<template><div id="app"><nav><router-link to="/">路径一/</router-link> |<router-link to="/about?name=lili&age=18">路径二/about</router-link> |<router-link :to="{ name: 'InfoView' }">路径三直接到InfoView对应的路径</router-link></nav><router-view /></div>
</template>

• router-link标签相当于a标签
  • to属性相当于src , to属性的值就是路由规则的path值。
  • tag属性 可以将router-link标签在编译时不默认转为a标签，而转成对应的标签。
    • 如tag="span"转成span标签。
      • <router-link to="/about" tag="span">About</router-link>
• 命名路由，可以通过命名路由名称跳转页面。
  • <router-link :to="{ name: 'InfoView' }">路径三直接到InfoView对应的路径</router-link>
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygTc1Q8p-1682524495861)(./router-link标签与vue路径实例对象与router-view标签的联系.png)]

vue路由传参

• 在路由规则中定义参数（动态路由）
  • 为什么要传参？
    • 因为如果一个vue页面不通过传参，那么页面的初始化可控数据就是固定的，也就是说，用户只能看到一个页面。
      • 而如果有其它的可控初始化数据，那么vue组件就可以在生命周期中通过接口向后台中请求对应的数据，进而让页面显示出不同的内容。

vue路由传参的类型

1. query

   • 问号传参

   • 命名路由传参

   • 都是显式传参(刷新页面数据不消失)

     <template><router-link to="/about?name=lili&age=18">About</router-link>
     </template>
     

     • 组件页面接收参数

       <template><h3>{{ $route.query.name }}</h3>
       </template>
       

       • 不用修改路由配置信息
2. params

   1. 隐式传参(刷新页面数据消失)

      • 通过命名路由方式传参
        • 不需要修改路由配置信息

   2. 显式传参 必须修改路由配置信息

      1. 必须修改路由配置信息

         import Vue from "vue";
         import VueRouter from "vue-router";
         Vue.use(VueRouter);
         // 路由配置规则
         const routes = [{path: "/ParamsShowView",name: "ParamsShowView",component: () => import("../views/ParamsShowView.vue"),},
         ];const router = new VueRouter({routes,
         });
         export default router;
         

         import Vue from "vue";
         import VueRouter from "vue-router";
         Vue.use(VueRouter);
         // 路由配置规则
         const routes = [{path: "/ParamsShowView/:name/:age",//由"/ParamsShowView"改为"/ParamsShowView/:name/:age"name: "ParamsShowView",component: () => import("../views/ParamsShowView.vue"),},
         ];const router = new VueRouter({routes,
         });
         export default router;
         

      2. 显式传参(刷新页面数据不消失)

         <template><router-link to="/ParamsShowView/fang/25">ParamsShowView</router-link>
         </template>
         

         • 组件页面接收参数

           <template><div>{{ $route.params }}</div>
           </template>
           

   3. props

      1. 简化 params 传参的时候，接收参数

         <router-link to="/info/lisa/28">Info</router-link>
         

         {path: '/info/:name/:age',name: 'Info',component: Info,props:true
         }
         

         • 组件接收

           <template><div>{{ name }}---{{ age }}</div>
           </template>
           <script>
           export default {props:["name","age"]
           }
           </script>
           

      2. 直接

         {path: '/my',name: 'My',//路由懒加载component: () => import(/*webpackChunkName: "about"*/ '../views/My.vue'),props:{ sidebar: false }
         }
         

         <template><div>MY---{{ sidebar }}</div>
         </template>
         <script>
         export default {props:["sidebar"]
         }
         </script>
         

路由重定向

  {//路由重定向--访问 / 页面,都 /homepath:"/",redirect:"/home"},{//路由重定向--访问任何没有的页面,都page404path:"*",redirect:'/page404'},

路由高亮显示

路由别名

{path: '/home',//路由路径name: 'Home',//命名路由component: Home,//展示的组件页面alias:"/h"
},

路由模式

• hash 哈希模式
• history 历史模式
• abstract 后端路由—修改网址路径没用，vue中并没有用

const router = new VueRouter({//路由属性routes,// routes:routes// mode: "history",//历史模式mode:'hash',//默认是hash// mode:'abstract'//后端路由---修改网址路径没用，vue中并没有用
})

hash哈希模式与history历史模式的区别

• 哈希模式（哈希路由） 是监控浏览器哈希值的变化
• 历史模式（浏览器browser路由） 是监控浏览器路径的变化,—服务器必须配合，否则404
  • 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法来监控

history历史模式的缺陷

• 通过history api，我们丢掉了丑陋的#，但是它也有个问题：不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,
  • 因为刷新是实实在在地去请求服务器的。
• 在hash模式下，前端路由修改的是#中的信息，而浏览器请求时不会将 # 后面的数据发送到后台，所以没有问题。
• 但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。

二级路由

在router-view标签中显示变换出来的vue页面组件中又使用了router-view标签。

{path: '/info',name: 'Info',//路由懒加载component: () => import(/* webpackChunkName: "about" */ '../views/Info.vue'),props:true,//redirect:"/info/infoa",//二级路由重定向--1//二级路由children:[//path:"/infoa"----to="/infoa"//path:"/info/infoa"----to="/info/infoa"//path:"infoa"----to="/info/infoa"{//二级路由重定向--2path:"/info",redirect:"infoa"},{path:"infoa",name:"Infoa",component: () => import(/* webpackChunkName: "about" */ '../views/Info/InfoA.vue'),},{path:"infob",name:"Infob",component: () => import(/* webpackChunkName: "about" */ '../views/Info/InfoB.vue'),}]
},

• 页面结构

  • 根目录，无路由层级，必定显示。

    <template><div id="app"><router-link to="InfoView">InfoView</router-link><router-view /></div>
    </template>
    

  • 一级路由层级页面，#号后面必须要对应。

    <template><div><h1>InfoView</h1><router-link to="/InfoView/InfoViewA">/InfoView/InfoViewA</router-link> | <router-link to="/InfoView/InfoViewB">/InfoView/InfoViewB</router-link><router-view></router-view></div>
    </template>
    

  • 二级路由层级页面，依附于一级路由，展示在一级路由中的router-view标签区域内。

    <template><div>InfoViewA</div>
    </template>
    

    <template><div>InfoViewB</div>
    </template>
    

路由高亮

• 实际上就是css样式设置，路由切换时，router-link标签由vue渲染成的DOM中会添加上动态的类名。

  • 高亮的非精准匹配 /info/infna ---- /info与/info/infna

    .router-link-active{background-color: red;
    }
    

  • 高亮的精准匹配 /info/infna ---- /info/infna (只匹配当前路径触发的元素)

    .router-link-exact-active {background-color: yellow;
    }
    

高亮换名称

const router = new VueRouter({//路由属性routes,// routes:routeslinkActiveClass: 'myactive',linkExactActiveClass: "exact-router"
})

$route路由信息对象

• $route 路由信息对象
  1. $route.path
     • 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。
  2. $route.params
     • 一个 key/value 对象，包含了 动态片段 和 全匹配片段，
     • 如果没有路由参数，就是一个空对象。
  3. $route.query
     • 一个 key/value 对象，表示 URL 查询参数。
     • 例如，对于路径 /foo?user=1，则有 $route.query.user == 1，
     • 如果没有查询参数，则是个空对象。
  4. $route.hash
     • 当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
  5. $route.fullPath
     • 完成解析后的 URL，包含查询参数和 hash 的完整路径。
  6. $route.matched
     • 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
  7. $route.name 当前路径名字
  8. $route.meta 路由元信息

$router路由实例对象

• $router表示路由的实例对象，是路由配置生成的路由实例对象，一开始导出后，就被挂载到vue对象上了。

动态修改路由表的方法

• addRoute/addRoutes(淘汰) 添加路由

• getRoutes：获取路由表中的所有路由 数组

• removeRoute：删除路由

  router.removeRoute("My") //My是路由名称
  

• hasRoute:判断是否具有某个路由

动态添加一个路由

动态生成路由表一般由$router.addRoute()调用。

• addRoute/addRoutes(淘汰) 添加路由

  • addRoutes() 2023年已经被废弃了。

    router.addRoute({path:"/onepage",name:"OnePage",component: () => import(/* webpackChunkName: "about" */ '../views/OnePage.vue')
    })
    

• getRoutes：获取路由表中的所有路由* 数组

路由页面跳转的方法

• push(XXX) 去某个页面,有历史记录
• replace(XXX) 去某个页面,没有历史记录
• back() 返回上一个页面
• forward() 下一个页面
• go(0) 刷新
• go(1) 下一个页面 go(5) 下五个页面
• go(-1) 上一个页面 go(-7) 上一个页面

//this.$router.replace("/about");
this.$router.push({name:"About",query:{name:"fang",age:29}
});

导航守卫

• 全局守卫
• 路由配置中的路由独享守卫
• 组件内的守卫

导航解析流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edNCFpVz-1682524495862)(./路由钩子解析流程.png)]

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

进阶参考

1. vue2对应的Vue Router3官网
2. vue 基于abstract 路由模式 实现页面内嵌