Vue2全家桶 - VueRouter - 【1】路由基础【简介、使用步骤、声明式导航、重定向、路由模式、编程式导航、路由嵌套、导航守卫、路由元信息】

禁止摆烂_才浅
2,444 阅读4分钟

一、路由简介

  • 前端路由：
    • 路径 和 组件 的 映射关系（一一对应）；
  • SPA：
    • 单页面应用程序；
    • 基于前端路由技术；
    • 优点：
      • 局部刷新，用户体验更好；
      • 数据传递容易，开发效率高；
    • 缺点：
      • 开发成本高；
      • 首次加载会比较慢，不利于SEO优化；

二、vue-router 使用步骤

  • 以下步骤是基于 默认模式 创建Vue2项目的；
    • image.png
  1. 下包：
    • yarn add vue-router@3.5.3
    • 下载太高版本的VueRoute会报错的；
      • image.png
  2. main.js 导包：
    • import VueRouter from 'vue-router
  3. 注册：
    • 使用 Vue.use(VueRouter) 进行注册；
    • 一旦注册了路由插件，会给Vue提供两个全局组件和两个全局对象；
    • 全局组件：RouterLink 和 RouterView；
    • 全局对象：$router 和 $route；
  4. 创建路由规则数组：
    • 属性名是固定的；
    • 配置 path 和 component 的关系；
    • Vue中路由指的是：
      • 路径（path） 和 组件（component） 的映射关系（不同的路径对应不同的组件）;
  5. 创建路由实例：
    • new VueRouter();
  6. 注入：
    • 在 new Vue() 里面注入；
  7. 给出口
    • 在合适的页面中增加给路由出口<router-view />（单双标签都可）；
  • 路由的运作原理：
    • 当 浏览器url地址 发生改变 的时候，在 router 数组中 从上往下 查找 对应的path，如果 命中（全等）了，则用 path 对应的 component 替换掉 <router-view /> 的位置。
  • 示例展示： 
    import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 1.下载包：yarn add vue-router -S

// 2.导入vue-router包
import VueRouter from 'vue-router'

// 3.注册
// vue.use(插入对象)：给Vue增强能力
// 一旦注册了路由了插件，会给Vue提供两个全局组件和两个全局对象
// 全局组件：RouterLink 和 RouterView
// 全局对象：$route 和 $router
Vue.use(VueRouter)

// 4.创建路由规则数组
// 配置path和component的对应关系
// Vue中路由是指：
// 路径（path）和组件（component）的映射关系（不同路径对应不同的组件）
// 导入三个页面组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'
import NotFind from './views/NotFind.vue'
const routes = [
  {
    path: '/',
    // 重定向
    redirect: '/find'
  },
  {
    // 属性名是固定写法
    path: '/find',    // /标识根路径，不能丢
    component: Find   // 页面组件
  },
  {
    path: '/my',
    component: My
  },
  {
    path: '/friend',
    component: Friend
  },
  {
    path: '*',
    // component: NotFind,
    // 路由懒加载
    component: () => import('./views/NotFind.vue')
  }
]

// 5.创建路由实例
const router = new VueRouter({
  // 属性名固定：routes
  routes,
  // 自配置激活类名
  linkActiveClass: 'on-active',
  linkExactActiveClass: 'off-active'
})

new Vue({
  // 6.注入
  // 属性名固定：router
  router,
  render: h => h(App),
}).$mount('#app')

// 7.给出口 回到App.vue中 给一级路由添加出口
// <router-view></router-view>（标签名也可以写成大驼峰命名法）

三、声明式导航 - RouterLink

  • router-link：
    • VueRouter 在 全局注册 的 组件，本质 就是 a标签；

3.1 ❗ RouterLink 怎么使用？

  • 当标签使用：
  • 语法： 
    <router-link to="路由规则数组中component对应的path属性值"> 给用户展示的内容 </router-link>
  • ❗ 注意：
    • 必须传入 to属性，属性值 必须和 路由规则数组 的 path属性值 一致；
  • image-20221006174929446.png

3.2 RouterLink 的 好处？

  • 自带 激活时 的 类名，可以做高亮效果；
    • image-20221006174502269.png
  • 配置激活类型（类名自定义）：
    • image-20221006175952443.png

四、重定向和路由模式

4.1 Vue路由重定向

  • 匹配 path 后，强制跳转 path路径；
  • 如何检测默认路由？
    • 规则里定义 path: '/'；
  • 如何重定向路由路径？
    • redirect 配置项，属性值 为要 强制切换 的 路由路径； image-20221006180731473.png
    • 说明：
      • 当检测到浏览器的url地址是/的时候，就跳转到 Find 组件；

4.2 Vue路由配置404页面

  • 放在 路由规则数组 最后面，path 从上往下 匹配，如果前面没有匹配上的 path 就命中最后这个 * （任意路径都能访问该路径对应的组件）；
  • 配置步骤：
    1. 先准备一个 404 组件；
    2. 在 路由规则数组 的 最后面 添加一个配置项；
    3. path 为 *（如果把该配置项放在前面，那显示的页面全部都是404了😂）；
    4. image-20221006181546608.png

4.3 路由模式

  • 路由有两种模式：
    • hash：
      • 表现为 url 上有 # 号；
    • history：
      • 表现为 url 上没有 # 号；
  • 切换路由模式：
    • 在 创建路由实例 的 配置项 中，有 mode属性，可以配置路由模式，属性值就是 hash 和 history；
  • 示例展示： image-20221007085129608.png

五、声明式导航传参

  • 在跳转路由时，可以给对应的组件内传值；
  • 声明式导航 - router-link;

5.1 查询字符串传参（参数出现在浏览器url地址上）

  • ❗ 注意：
    • 查询字符串，接值 的时候，看 query；

5.1.1 字符串拼接传参

  • 跳转的时候传值：
    • 在 <router-link>标签 的 to属性 上进行 拼接；
    • 语法： 
      <router-link to="/path?参数名1=值1&参数名2=值2&……">
    xxx
</router-link>
  • 在对应的组件接收值：
    • 在标签中写不需要this，在js中书写还是需要的；
    • this.$route.query；
    • image-20221007090806358.png
    • image-20221007091106283.png

5.1.2 配置对象传参

  • 传参语法： 
    <router-link :to="{
              path: '和规则数组的path属性一样',
              query: {
                  属性名: 属性值,
                  // 键值对形式
              }
          }">
      给用户展示的内容
</router-link>
  • 接值语法： image-20221007092142413.png image-20221007091944125.png

5.2 动态路由传参

  • ❗ 动态路由传参，接收值 的时候，看 params；
  • 先占位（改造规则数组），再传值（有几个占位的参数名，就产几个参数值），最后接值（$route.params.参数名）；
  • 步骤：
    1. 需要先对 规则数组 对应的path 进行改造： image-20221007094934547.png
    2. 传参：
      • to 属性值 为 字符串： 
        <router-link
    to="/path/参数1的值/参数的值/……"
>
    // 要展示的内容
</router-link>
        • 示例展示： image-20221007095042809.png
      • to 属性值 为 配置对象：
        • 示例展示： image-20221007101053900.png
    3. 接值： 
      // 标签中
$route.params.参数名

// js中
this.$route.params.参数名
      • 示例展示： image-20221007094725130.png
  • ❗ 注意：
    • 动态路由 不能通过 path + params 配合，因为path会忽略params;
      • 这里的path指的是，RouterLink的to属性的属性值中不能出现path；
    • 正确方式：name(需要给对应的路由取名，也叫命名路由) + params；
    • 虽然写的是对象，但是最终会转为字符串；

六、编程式导航

  • $route 和 $router 区别：
    • $route：
      • 获取路由参数，表示 当前 激活的 路由对象；
    • $router：
      • 实现路由跳转，$router.push()实现跳转；
  • 挂载后（使用mounted钩子函数），延迟n秒，自动跳转到指定页面（主要是路由跳转和传参的语法展示）： 
    mounted() {
    setTimeout(() => {
        // 1.push(字符串)
        this.$router.push('/path')
        
        // 2.push(对象)
        this.$router.push({
            path: '/path'
        })
        
        // 3.查询字符串参
        // 字符串
        this.$router.push('/path?属性名1=属性值1&属性名2=属性值2&……')
        // 对象
        this.$router.push({
            path: '/path',
                query: {
                属性名1: 属性值1,
                属性名2: 属性值2,
                ……
            }
        })
        
        // 4.传动态路由参
        // 改造规则数组
        {
            path: '/path/:属性名1/:属性名2……',
        }
        // 字符串
        this.$router.push('/path/属性值1/属性值2……')
        // 对象
        // 改造规则数组
        {
            path: '/path/:属性名1/:属性名2……',
            name: '对应component'
        }
        this.$router.push({
            name: '规则数组name属性值',
            params: {
                属性名1: 属性值1,
                属性名2: 属性值2,
                ……
            }
        })
    }, n);
}
  • 示例展示： image-20221007110314058.png image-20221007110701091.png

七、路由嵌套

  • 二级路由如何配置：
    • 创建需要的二级路由组件；
    • 在路由规则数组里面对应的对象里面新增 children 属性（属性值 = 数组对象），在里面配置二级路由规则对象（path + component）；
    • 对应第一季页面设置给出口，显示二级路由页面；
  • 二级路由主要注意什么？
    • 二级路由 path 一般 不写根路径（/）；
  • 示例展示：
    • 在views里创建对应二级页面组件并导入到main.js中； image-20221007113655467.png
    • 在对应的规则数组里面，新增children属性，在里面配置二级路由规则对象； image-20221007115908224.png
    • 在对应一级组件里面设置出口以及router-link的to属性； image-20221007114151001.png

八、导航守卫

  • 只有常用的：
    • 全局前置守卫：
      • 任何一个路由在跳转之前都必须经过这个函数；
    • 全局后置守卫；
  • 还有一些别的守卫，可以移步Vue Router官网：
    • 全局解析守卫；
    • 路由独享守卫；
    • 组件内的守卫：
import Vue from 'vue'
// import Router from 'vue-router'
import VueRouter from 'vue-router'

// 路由规则数组
const routes = []

/**
* 导入 vue-router 的时候，起的变量名是啥，就是new 啥
* const router = new Router({})
**/

const router = new VueRouter({
    // 最基本的有个routes
    // 属性名和属性值一样，可以简写
    routes
})

// 路由全局前置守卫
router.beforeEach((to, from, next) => {
    /**
     * to = 到哪里去
     * from = 从哪里来
     * next = 是前置守卫必须执行的钩子，next必须执行，如果不执行，页面就死了
     * next() - 通过，放行
     * next(false) - 跳转终止
     * next(地址) - 跳转到某个页面
     */
     
    // 相关逻辑
})

// 路由全局后置守卫
router.afterEach()
  • 今后在项目中判断token（令牌） 是否为空字符串，可知道用户是否登录；
  • 示例展示： image-20221007122333947.png
    • next函数传值：
      • false，停留在原地；
      • 不传之表示正常放行 image-20221007121839074.png

九、路由元信息

  • 通过 meta 字段可以给路由添加更多信息；
  • 取值： 
    this.$route.meta.参数名
  • image-20221008091557585.png
  • image-20221008091627536.png
avatar
文章
阅读
粉丝