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

禁止摆烂_才浅2023-10-15 17:50

一、路由简介

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

二、vue-router 使用步骤

  • 以下步骤是基于 默认模式 创建Vue2项目的；
  1. 下包 ：
    • yarn add vue-router@3.5.3
    • 下载太高版本的VueRoute会报错的；
  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 /> 的位置。

  • 示例展示：

    js 复制代码 
    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标签；

  • 当标签使用：

  • 语法 ：

    html 复制代码 
    <router-link to="路由规则数组中component对应的path属性值"> 给用户展示的内容 </router-link>

  • ❗ 注意 ：

    • 必须传入 to属性 ，属性值 必须和 路由规则数组 的 path属性值 一致；
  • 自带 激活时 的 类名 ，可以做高亮效果；
  • 配置激活类型 （类名自定义）：

四、重定向和路由模式

4.1 Vue路由重定向

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

4.2 Vue路由配置404页面

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

4.3 路由模式

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

五、声明式导航传参

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

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

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

5.1.1 字符串拼接传参

  • 跳转的时候传值 ：

    • 在 <router-link>标签 的 to属性 上进行 拼接；

    • 语法 ：

      js 复制代码 
      <router-link to="/path?参数名1=值1&参数名2=值2&......">
    xxx
</router-link>

  • 在对应的组件接收值 ：

    • 在标签中写不需要this，在js中书写还是需要的；
    • this.$route.query；

5.1.2 配置对象传参

  • 传参语法 ：

    html 复制代码 
    <router-link :to="{
              path: '和规则数组的path属性一样',
              query: {
                  属性名: 属性值,
                  // 键值对形式
              }
          }">
      给用户展示的内容
</router-link>

  • 接值语法 ：

5.2 动态路由传参

  • ❗ 动态路由传参 ，接收值 的时候，看 params；
  • 先占位 （改造规则数组 ），再传值 （有几个占位的参数名，就产几个参数值），最后接值 （$route.params.参数名）；
  • 步骤 ：

    1. 需要先对 规则数组 对应的path 进行改造 ：

    2. 传参 ：

      • to 属性值 为 字符串 ：

        js 复制代码 
        <router-link
    to="/path/参数1的值/参数的值/......"
>
    // 要展示的内容
</router-link>
        • 示例展示：

      • to 属性值 为 配置对象 ：

        • 示例展示：

    3. 接值 ：

      js 复制代码 
      // 标签中
$route.params.参数名

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

六、编程式导航

  • $route 和 $router 区别：

    • $route ：
      • 获取路由参数 ，表示 当前 激活的 路由对象；
    • $router ：
      • 实现路由跳转 ，$router.push()实现跳转；

  • 挂载后（使用mounted钩子函数），延迟n秒，自动跳转到指定页面（主要是路由跳转和传参的语法展示）：

    js 复制代码 
    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);
}

  • 示例展示：

七、路由嵌套

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

八、导航守卫

  • 只有常用的：
    • 全局前置守卫：
      • 任何一个路由在跳转之前都必须经过这个函数；
    • 全局后置守卫；
  • 还有一些别的守卫，可以移步Vue Router官网：
    • 全局解析守卫；
    • 路由独享守卫；
    • 组件内的守卫：
js 复制代码 
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（令牌） 是否为空字符串，可知道用户是否登录；
  • 示例展示：
    • next函数传值：
      • false，停留在原地；
      • 不传之表示正常放行

九、路由元信息

  • 通过 meta 字段可以给路由添加更多信息；

  • 取值：

    js 复制代码 
    this.$route.meta.参数名
相关推荐
粥里有勺糖4 小时前
安利一下最近用的桌面“Agent” | T3 Code
前端·github·ai编程
xy34534 小时前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
不停喝水4 小时前
【前端转全栈java速通课】 项目实战④7-11节 操作数据库-登录-注册-修改密码-注销-mubatis-plus简化crud-
java·前端·数据库
一水鉴天5 小时前
统一对象拓扑（UOT）设计全链定稿：从三件事分离到三继承 之1 20261010（豆包“查看聊天内容”继续）
前端·css
栖凤5 小时前
Java 的 try-catch 在 Agent 里失效了，我用了 5 个模式才兜住
java·前端·python
粥里有勺糖5 小时前
视野修炼第136期 | 前端小恐龙"Deno"被收购
前端·github·ai编程
修炼的dance5 小时前
页面塞了13.88 MB字体，导出的PDF只有71 KB
前端
qq_369173635 小时前
如何将 AI 生成的 HTML 网页发布成在线链接？不用自己搭建服务器
前端·人工智能·html·效率工具·html 发布
风花一世月6 小时前
⚡ 我把一座含氢能源园区搬进了浏览器（五类能流实时算守恒，在线直接玩）
前端·人工智能
羲云6 小时前
Claude 越界事件之后：Agent 权限设计为什么不能只靠提示词
前端
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地09Telegram APK 下载安装完整指南 — 2026年最新10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新