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

方朝端
167 阅读3分钟

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>

路由重定向

  {//路由重定向--访问 / 页面,都 /home
    path:"/",
    redirect:"/home"
  },
  {//路由重定向--访问任何没有的页面,都page404
     path:"*",
     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"
    {//二级路由重定向--2
      path:"/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:routes
  linkActiveClass: '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 路由模式 实现页面内嵌
avatar
文章
阅读
粉丝