vue-router（路由）详细教程

最新推荐文章于 2024-09-11 17:04:07 发布

精力充沛的码农

最新推荐文章于 2024-09-11 17:04:07 发布

阅读量1k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_57320268/article/details/124232035

版权

由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
有的小伙伴会有疑虑，为什么我们不能像原来一样直接用a标签编写链接呢？因为我们一般用Vue做的都是单页应用，只有一个主页面index.html，所以你写的<a></a>标签是不起作用的，要使用vue-router来进行管理。

1 路由是什么? vue 中路由又是什么?

路由是一种映射关系.

vue 中路由是路径和组件的映射关系

2 为什么要学习路由?

在单页面内,要实现切换业务场景,需要用到前端路由,

优点

整体不刷新页面，用户体验更好
数据传递容易, 开发效率高

缺点

首次加载会比较慢一点。不利于seo

3 路由-vue-router介绍

vue-router 的本质是一个第三方的包

vue 路由 -组件分类

src/views 文件夹页面组件 -- 展示页面 -- 配合路由使用
src/components文件夹复用组件 -- 展示数据/常用于复用

3 路由-vue-router 使用步骤

1 下载 yarn add vue-router   Vue 2 需要搭配 vue-router@3.5.3 的版本才可以运行

2. 引入 VueRouter (构造函数) import VueRouter from 'vue-router'

3. 安装核心插件 Vue.use(VueRouter)   会在全局注册两个组件: router-view router-link

4. 创建路由规则数组  const routes = [ ]

5.通过规则创建对象 const router = new VueRouter({ routes })

6. 将路由对象挂到 Vue 实例中 (注入)

new Vue({

render: h => h(App),

router

}).$mount('#app')

3 路由-vue-router 声明式导航-跳转和编程式导航-跳转

声明式导航-跳转 在router-link上的to属性传值语法如下:

字符串传参 : /path?key=value 对应组件用$route.query.key 取值
路径传参: /path/:key 对应组件用$route.params.key 取值 (注意:需要提前在路由对象配置 path: “/path/参数名” )

编程式导航-跳转用js代码

this.$router.push()

参数1: 可以传入对象

{ path, name } 二选一进行跳转要和路由规则数组里对应

如果是通过 path 跳转, 可以直接把路径作为第一个参数

4 路由-vue-router 声明式导航-传参和编程式导航-传参

声明式导航-传参   在router-link上的to属性传值, 语法格式如下

/path ?参数名=值

/path/ 值 – 需要路由对象提前配置 path: “/path/: 参数名 ”

对应页面组件接收传递过来的值

$route.query.参数名

$route.params.参数名

编程式导航-传参 JS跳转路由, 传参

this.$router.push({
path: "路由路径"
name: "路由名",
query: {
   "参数名": 值
}
params: {
       "参数名": 值
}
})

// 对应路由接收 $route.params.参数名取值
// 对应路由接收 $route.query.参数名取值

==格外注意: 使用path会自动忽略params==

5 Vue路由-重定向

网页打开url默认hash值是/路径如果我们需要重新设置路径就需要重定向

语法: 在创建路由规则数组那里加 redirect

6Vue路由-404页面

找不到路径的时候,就给个提示页面

首先在component文件夹加一个NotFound.vue,

在main.js - 修改路由配置

(1. 引入 import NotFound from '@/views/NotFound'

2. 创建路由对象规则配置 const routes = [
// ...省略了其他配置
// 404在最后(规则是从前往后逐个比较path)
{
path: "*",
component: NotFound
}] )

7 Vue路由-模式设置

在实例化路由对象时, 传入mode选项和值修改

const router = new VueRouter({
routes,
mode: "history" // 打包上线后需要后台支持, 模式是hash
})

8Vue路由-路由嵌套

二级路由注意什么?

二级路由path一般不写根路径/

跳转时路径要从/开始写全

9 Vue路由-声明式导航-类名区别

router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名

router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径

10 Vue路由-全局前置守卫

什么是路由守卫?

路由在真正跳转前, 会执行一次beforeEach函数, next调用则跳转, 也可以强制修改要跳转的路由

全局前置守卫主要用于做权限控制 (页面权限)

注册全局前置守卫

参数1: 到哪里去

参数2: 从哪里来

参数3: next 是否放行, 也可以控制跳转的路径

如果注册了前置守卫, 必须要调用 next 方法, 否则路由系统就瘫痪了

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

next 方法有三种作用:

next() 放行, 可以跳转

next(false) 不放行, 阻止跳转

next('路径') 跳转到指定路径

return next(要跳转到的页面)

}