【vue2】路由之 Vue Router

文章目录

  • 一、安装
  • 二、基础使用
    • 1、简单的示例
    • 2、动态路由
      • 2.1 定义动态路径参数
      • 2.2 获取动态路径的参数
      • 2.3 捕获所有路由
    • 3、嵌套路由
    • 4、编程式的导航
      • 4.1 router.push
      • 4.2 router.replace
      • 4.3 router.go(n)
    • 5、命名路由
    • 6、重定向
  • 三、进阶
    • 1、导航守卫
      • 1.1 全局前置守卫
      • 1.2 全局后置钩子
      • 1.3 路由独享的守卫
      • 1.4 组件内的守卫
      • 完整的导航解析流程
    • 2、路由懒加载

一、安装

NPM
注意：vue2中需使用 v.3x 版本

npm install vue-router@3.0.0 --save

vue-router v3.x 文档：文档链接

二、基础使用

1、简单的示例

src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = {
  template: '<div>Foo</div>'
}
const Bar = {
  template: '<div>Bar</div>'
}

// 2. 定义路由
// 每个路由应该映射一个组件
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes
})

// 4. 通过 Vue.use() 明确地安装路由功能
Vue.use(VueRouter);

// 5. 创建和挂载根实例。
// 通过 router 配置参数注入路由，让整个应用都有路由功能
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

src/App.vue

<template>
  <div id="app">
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/foo">Foo</router-link><br />
      <router-link to="/bar">Bar</router-link>
    </p>
    <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

2、动态路由

2.1 定义动态路径参数

动态路径参数以冒号开头

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

现在像 /user/123 和 /user/456 都将映射到相同的路由

2.2 获取动态路径的参数

当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

可以通过 $route.params 查看所有的参数信息
$route 对象还提供了其它有用的信息

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
  created: function () {
    console.log(this.$route)
  }
}

当路由是 /user/101 时，$route 示例：
在这里插入图片描述

2.3 捕获所有路由

可以使用通配符 (*)：

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

3、嵌套路由

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import UserView from './components/UserView.vue'
import FooView from './components/FooView.vue'
import BarView from './components/BarView.vue'

const routes = [
  {
    path: '/user',
    component: UserView,
    children: [
      {
        // 当 /user/foo 匹配成功，
        // FooView 会被渲染在 User 的 <router-view> 中
        path: 'foo',
        component: FooView
      },
      {
        // 当 /user/bar 匹配成功，
        // BarView 会被渲染在 User 的 <router-view> 中
        path: 'bar',
        component: BarView
      },
    ]
  },
]

const router = new VueRouter({
  routes
})

Vue.use(VueRouter);

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

顶层 <router-view> 出口，App.vue

<template>
  <div id="app">
    <p>
      <router-link to="/user/foo">Foo</router-link><br />
      <router-link to="/user/bar">Bar</router-link><br />
    </p>
    <!-- 这个是顶层的 router-view -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

组件同样可以包含自己的嵌套 <router-view>
组件 UserView.vue

<template>
  <div class="user">
    <h2>User</h2>
    <router-view></router-view>
  </div>
</template>

组件 BarView.vue

<template>
    <div>
        bar
    </div>
</template>

组件 FooView.vue

<template>
    <div>
        foo
    </div>
</template>

要注意，以 / 开头的嵌套路径会被当作根路径

4、编程式的导航

4.1 router.push

这个方法会向 history 栈添加一个新的记录
代码实现路由跳转：

router.push(location, onComplete?, onAbort?)
声明式编程式
<router-link :to="..." >router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象，示例：

<template>
  <div id="app">
    <div>
      <button @click="routeUser">字符串跳转user</button>
      <button @click="routeFoo">对象跳转foo</button>
      <button @click="routeBarParams">对象跳转带参数Params</button>
      <button @click="routeBarQuery">对象跳转带参数Query</button>
    </div>
    <!-- 这个是顶层的 router-view -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  methods: {
    routeUser() {
      // 字符串
      this.$router.push("/user");
    },
    routeFoo() {
      // 对象
      this.$router.push({path: "/foo"});
    },
    routeBarParams() {
      // 命名的路由（带name属性）
      this.$router.push({ name: 'bar', params: { id: '123' }})
    },
    routeBarQuery() {
      // 带查询参数，变成 /bar?id=456
      this.$router.push({ path: '/bar', query: { id: '456' }})
      
      // 注意：如果提供了 path，params 会被忽略
      // 下面的 params 不生效
	  // this.$router.push({ path: '/bar', params: { id }}) // -> /user
    },
  },
};
</script>

4.2 router.replace

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录

router.replace(location, onComplete?, onAbort?)
声明式编程式
<router-link :to="..." replace>router.replace(...)

4.3 router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
示例：

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

5、命名路由

可以在创建 Router 实例的时候，在 routes 配置中使用 name 给某个路由设置名称：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

6、重定向

重定向也是通过 routes 配置来完成，使用 redirect
下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

三、进阶

1、导航守卫

1.1 全局前置守卫

使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

每个守卫方法接收三个参数：

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    • next(): 进行管道中的下一个钩子
    • next(false): 中断当前的导航
    • next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址

确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错

身份时重定向到 /login 的示例：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) {
  	next({ name: 'Login' })
  } else {
	next()
  }
})

1.2 全局后置钩子

也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
  // ...
})

1.3 路由独享的守卫

可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

1.4 组件内的守卫

可以在路由组件内直接定义以下路由导航守卫：
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

完整的导航解析流程

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

2、路由懒加载

就是当路由被访问的时候才加载对应的组件
示例：

const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [{ path: '/foo', component: Foo }]
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/355202.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

日常学习之：vue + django + docker + heroku 对后端项目 / 前后端整体项目进行部署

日常学习之：vue + django + docker + heroku 对后端项目 / 前后端整体项目进行部署

文章目录 使用 docker 在 heroku 上单独部署 vue 前端使用 docker 在 heroku 上单独部署 django 后端创建 heroku 项目构建 Dockerfile设置 settings.pydatabase静态文件管理安全设置applicaiton & 中间件配置 设置 requirements.txtheroku container 部署应用 前后端分别部…
阅读更多...
SpringBoot整合Xxl-Job实现异步任务调度中心

SpringBoot整合Xxl-Job实现异步任务调度中心

目录 一、下载 1、源码 2、项目结构 3、模块说明 二、部署任务调度中心 1、创建数据库xxl-job 2、配置数据库 3、启动admin模块 4、打开任务调度中心 三、SpringBoot整合xxl-job 1、导入依赖 2、配置yml文件 3、配置类 4、启动项目 5、任务配置 6、测试 一、下…
阅读更多...
Windows 和 Anolis 通过 Docker 安装 Milvus 2.3.4

Windows 和 Anolis 通过 Docker 安装 Milvus 2.3.4

Windows 10 通过 Docker 安装 Milvus 2.3.4 一.Windows 安装 Docker二.Milvus 下载1.下载2.安装1.Windows 下安装&#xff08;指定好Docker文件目录&#xff09;2.Anolis下安装 三.数据库访问1.ATTU 客户端下载 一.Windows 安装 Docker Docker 下载 双击安装即可&#xff0c;安…
阅读更多...
[嵌入式系统-5]：龙芯1B 开发学习套件 -2- LoongIDE 集成开发环境集成开发环境的安装步骤

[嵌入式系统-5]：龙芯1B 开发学习套件 -2- LoongIDE 集成开发环境集成开发环境的安装步骤

目录 一、LoongIDE&#xff08;龙芯开发工具集成环境&#xff09;概述 1.1 概述 二、软件开发环境的安装过程 2.0 注意事项 2.1 步骤1&#xff1a;MingW运行环境 2.2 步骤2&#xff1a;安装LoongIDE 2.3 步骤3&#xff1a;安装MIPS工具链 2.4 配置工具链 2.5 重启电脑…
阅读更多...
总结NB-IoT模块和单片机的区别

总结NB-IoT模块和单片机的区别

在学习了NB-IoT模块后&#xff0c;紧接着又学习了单片机系统&#xff0c;单片机和NB-IoT模块有什么不同之处呢&#xff0c;总结为以下几点。 大纲如图&#xff1a; 一、硬件层面 1、采用芯片不同&#xff0c; &#xff08;1&#xff09;封装&#xff1a;封装尺寸、方式不同&a…
阅读更多...
Qt应用软件【串口篇】串口通信

Qt应用软件【串口篇】串口通信

文章目录 1.串口概述2.串口传输数据的基本原理电信号的传输过程 3.串口的几个概念数据位&#xff08;Data Bits&#xff09;奇偶校验位&#xff08;Parity Bit&#xff09;停止位&#xff08;Stop Bits&#xff09;流控制&#xff08;Flow Control&#xff09;波特率&#xff0…
阅读更多...
第九篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：ArkUI强大的状态管理机制解读

第九篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：ArkUI强大的状态管理机制解读

传奇开心果短博文系列 系列短博文目录鸿蒙开发技术点案例示例系列 短博文目录一、前言二、ArkUI强大的状态管理机制介绍三、以官方helloworld示例为例说明ArkUI的状态定义和管理四、以官方 HelloWorld 示例代码为例说明ArkUI状态依赖和自动更新五、以官方helloworld示例代码为例…
阅读更多...
PHP语法

PHP语法

#本来是在学命令执行&#xff0c;所以学了学&#xff0c;后来发现&#xff0c;PHP语法和命令执行的关系好像没有那么大&#xff0c;不如直接学php的一些命令执行函数了。# #但是还是更一下&#xff0c;毕竟还是很多地方都要求掌握php作为脚本语言&#xff0c;所以就学了前面的…
阅读更多...
多维时序 | Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预测

多维时序 | Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预测

多维时序 | Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预测 目录 多维时序 | Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预…
阅读更多...
第四十一周：文献阅读+GAN存在的问题和改进

第四十一周：文献阅读+GAN存在的问题和改进

目录 摘要 Abstract 文献阅读&#xff1a;基于Transformer的时间序列生成对抗网络 现有问题 提出方法 相关前提 GAN&#xff08;生成对抗网络&#xff09; Transformer 方法论 时间序列处理 TTS-GAN &#xff08;基于Transformer的时间序列生成对抗网络&#xff09;…
阅读更多...
STM32学习笔记(二) —— 调试串口

STM32学习笔记(二) —— 调试串口

我们在调试程序时&#xff0c;经常会使用串口打印相关的调试信息&#xff0c;但是单片机串口不能直接与 PC 端的 USB 接口通讯&#xff0c;需要用到一个USB转串口的芯片来充当翻译的角色。我们使用的开发板上有这个芯片&#xff0c;所以在打印调试信息的时候直接使用USB线连接开…
阅读更多...
05.领域驱动设计：认识领域事件，解耦微服务的关键

05.领域驱动设计：认识领域事件，解耦微服务的关键

目录 1、概述 2、领域事件 2.1 如何识别领域事件 1.微服务内的领域事件 2.微服务之间的领域事件 3、领域事件总体架构 3.1 事件构建和发布 3.2 事件数据持久化 3.3 事件总线 (EventBus) 3.4 消息中间件 3.5 事件接收和处理 4、案例 5、总结 1、概述 在事件风暴&a…
阅读更多...
Jmeter连接数据库报错Cannot load JDBC driver class‘com.mysql.jdbc.Driver’解决

Jmeter连接数据库报错Cannot load JDBC driver class‘com.mysql.jdbc.Driver’解决

问题产生： 我在用jmeter连接数据库查询我的接口是否添加数据成功时，结果树响应Cannot load JDBC driver class com.mysql.jdbc.Driver 产生原因： 1、连接数据库的用户密码等信息使用的变量我放在了下面，导致没有取到用户名密码IP等信息，导致连接失败 2、jmeter没有JDB…
阅读更多...
scrapy的入门使用

scrapy的入门使用

1 安装scrapy 命令: sudo apt-get install scrapy或者&#xff1a; pip/pip3 install scrapy2 scrapy项目开发流程 创建项目: scrapy startproject mySpider生成一个爬虫: scrapy genspider itcast itcast.cn提取数据:     根据网站结构在spider中实现数据采集相关内…
阅读更多...
MATLAB - 仿真单摆的周期性摆动

MATLAB - 仿真单摆的周期性摆动

系列文章目录 前言 本例演示如何使用 Symbolic Math Toolbox™ 模拟单摆的运动。推导摆的运动方程&#xff0c;然后对小角度进行分析求解&#xff0c;对任意角度进行数值求解。 一、步骤 1&#xff1a;推导运动方程 摆是一个遵循微分方程的简单机械系统。摆最初静止在垂直位置…
阅读更多...
2024年数学建模美赛 分析与编程

2024年数学建模美赛 分析与编程

2024年数学建模美赛 分析与编程 1、本专栏将在2024年美赛题目公布后&#xff0c;进行深入分析&#xff0c;建议收藏&#xff1b; 2、本专栏对2023年赛题&#xff0c;其它题目分析详见专题讨论&#xff1b; 2023年数学建模美赛A题&#xff08;A drought stricken plant communi…
阅读更多...
uniapp组件库Card 卡片 的使用方法

uniapp组件库Card 卡片 的使用方法

目录 #平台差异说明 #基本使用 #配置卡片间距 #配置卡片左上角的缩略图 #配置卡片边框 #设置内边距 #API #Props #Slot #Event 卡片组件一般用于多个列表条目&#xff0c;且风格统一的场景。 #平台差异说明 AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程…
阅读更多...
147基于matlab的信号多层分解和重构

147基于matlab的信号多层分解和重构

基于matlab的信号多层分解和重构&#xff0c;进行多频率分析的源程序&#xff0c;一般步骤:取样、分解、信号处理、重构&#xff1b;采用离散滤波器对近似系数和小波系数进行操作;程序已调通&#xff0c;可直接运行。 147 离散小波变换 多频率分析 信号重构 (xiaohongshu.com)…
阅读更多...
JDK 8 - SerializedLambda

JDK 8 - SerializedLambda

SerializedLambda是Java提供的关于lambda表达式的序列化方案&#xff0c;会将实现了Serializable接口的lambda表达式转换成 SerializedLambda 对象之后再去做序列化。其核心在于Java在对lambda表达式序列化时&#xff0c;虚拟机会添加一个writeReplace()方法。 根据Java的序列化…
阅读更多...
mac docker desktop被禁用了，如何使用虚拟机lima运行docker

mac docker desktop被禁用了，如何使用虚拟机lima运行docker

安装lima brew install lima创建配置 echo "\\ndynamic:\n big-sur:\n image: docker://docker:git\n linux:\n image: docker.io/limasoftware/ubuntu:20.04 \\n" > ~/.lima/default.yaml启动名叫default的虚拟机 limactl start default测试 limactl …
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站