路由的使用

longfan_

已于 2022-06-16 10:16:06 修改

阅读量76

点赞数

文章标签： vue.js

于 2022-05-22 21:24:09 首次发布

本文链接：https://blog.csdn.net/longfan_/article/details/124916453

版权

1.路由-是什么

1.路由是什么呢?

路由是一种映射关系

2.Vue中的路由是什么?

路径和组件的映射关系

2.路由-为何用

1.什么是单页面应用?

所有的业务都在一个页面编写, 只有一个html

2.单页面应用好处?

开发效率高, 用户体验好

3.单页面如何切换场景?

依赖路由切换显示

3.路由-vue-router介绍

vue-router模块包

它和 Vue.js 深度集成

可以定义 - 视图表(映射规则)

模块化的

提供2个内置全局组件

声明式导航自动激活的 CSS class 的链接

……

4.Vue路由-组件分类

页面组件 - 页面展示 - 配合路由用
复用组件 - 展示数据/常用于复用（重复渲染结构一样的标签）

5.Vue路由-vue-router使用

下包/引入/注册/规则/路由对象/注入/挂载点

：规则如何生效?

切换url上hash值, 开始匹配规则, 对应组件展示到router-view位置

6.Vue路由-声明式导航-跳转

vue-router提供了一个全局组件 router-link
router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
router-link提供了声明式导航高亮的功能(自带类名)

7.Vue路由-声明式导航-传参

在router-link上的to属性传值, 语法格式如下

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

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

$route.query.参数名
$route.params.参数名

8.Vue路由-重定向

网页打开url默认hash值是/路径
redirect是设置要重定向到哪个路由路径

例如: 网页默认打开, 匹配路由"/", 强制切换到"/find"上

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

9.Vue路由-404页面

在main.js - 修改路由配置

import NotFound from '@/views/NotFound'

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

10.Vue路由-模式设置

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

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

11.Vue路由-编程式导航-跳转

// 目标: 编程式导航 - js方式跳转路由
// 语法:
// this.$router.push({path: "路由路径"})
// this.$router.push({name: "路由名"})

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})

12.Vue路由-编程式导航-传参

path+query传, $route.query接
name+params传, $route.params接

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

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

13.Vue路由-路由嵌套

在现有的一级路由下, 再嵌套二级路由

1.二级路由如何配置?

创建需要的二级页面组件
路由规则里children中配置二级路由规则对象
一级页面中设置router-view显示二级路由页面

2.二级路由注意什么?

二级路由path一般不写根路径 /
跳转时路径要从/开始写全

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

目标: router-link自带的2个类名的区别是什么

观察路由嵌套导航的样式

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

15.Vue路由-全局前置守卫

目标：路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转

：什么是路由守卫?

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

// 目标: 路由守卫
// 场景: 当你要对路由权限判断时
// 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
// 参数1: 要跳转到的路由 (路由对象信息)    目标
// 参数2: 从哪里跳转的路由 (路由对象信息)  来源
// 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
// 注意: 如果不调用next, 页面留在原地

// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})