vue第7天学习笔记（vue路由导航守卫总结）

最新推荐文章于 2023-09-05 15:02:23 发布

hanjuyuan

最新推荐文章于 2023-09-05 15:02:23 发布

阅读量434

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/hanjuyuan/article/details/118440906

版权

Vue路由简介和基础使用

问题：前端框架中如何理解路由和组件这两个概念？？？

1.2路由的使用（七步）：--Vue-router（重点）

Vue路由简介和基础使用

1.什么是路由？

路由是一种映射关系。

2.vue的路由：

路径和组件的映射关系

3.为什么要使用路由？

在一个页面切换场景。（如：网易云音乐）

单页面的应用：也就是在一个HTML页面实现所有的功能。

单页面：简称SPA

问题：前端框架中如何理解路由和组件这两个概念？？？

1.2路由的使用（七步）：--Vue-router（重点）

1.3 组件分类

⚫ .vue文件本质无区别, 方便大家学习和理解, 总结的一个经验
⚫ src/views文件夹
⚫ 页面组件 - 页面展示 - 配合路由用
⚫ src/components文件夹
⚫ 复用组件 - 展示数据/常用于复用

-------------------------------------------------------------------------

声明式导航

目标：可用组件router-link来替代a标签

⚫

1. vue-router提供了一个全局组件 router-link

⚫

2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性( to无需# )

⚫

3. router-link提供了声明式导航高亮的功能( 自带类名 )

2.1 声明式导航 - 跳转传参

两种方式：

一:/path?参数名=值

1）在父组件里面--①路径里面传值

to=path？username=zs&age=18

2）在对应的页面中接收值--$route.query.参数名

<p>{{$route.query.参数名}}</p>

问题：/path?参数名=值只能传递一个参数？？？

可以传递多个参数，用&符号拼接即可

二：路径传参

1）在配置里面man.js

2)在父组件里面--传入值

2）在页面里面接收值---$route.params.参数名

补充：$ route表示：每一项的匹配规则

代码展示：

问题：如果要传入多个值呢？路径后面继续"/：变量名"即可！

问题：业务场景都有什么呢？

重定向和模式

问题1: 网页第一次打开没有默认的页面?

问题2: 如何解决呢?

3.0路由--重定向

通俗地讲，就是改变打开页面的默认地址。

目标：匹配path后, 强制跳转path路径

网页打开url默认hash值是 /--(/表示根路径)。

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

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

redirect是设置要重定向到哪个路由路径

补充：在mian.js里面配置

方式2也能实现改变

问题1: 当你访问不存在的页面会显示什么?
问题2: 当我们访问的路由路径不存在应该怎么办?

3.1路由404的设置：

步骤：

1.准备一个网页--新建一个组件（页面）

2.在匹配规则中引入访问不存在显示的页面--然后设置配置得放在最后面！！！！

目标：找不到路径给个提示页面

路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个

问题1: 路由的路径看起来不自然, 能否切成真正路径形式?
问题2: 如何切换路由模式呢？

3.2路由模式的设置（两种）--面试题

目标：修改路由在地址栏的模式

⚫ hash路由例如: http://localhost:8080/#/home
⚫ history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)

在main.js配置对象的的时候修改即可。（在第五步修改）

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

如何选择哪一种？（面试）

哈希模式不会造成浏览器的属性，html5新赠的history模式进行页面的保存，在刷新的时候会从历史打开，history需要后端的支持。（后端--具体的步骤参考vue.js官网）。

问题: a标签可以切换路由路径, 用JS方式可以切换吗?

4.编程式导航：（重要！）

知识总结：路由的切换路径两种方式：声明式导航（ router-link）和编程式导航。

什么是编程式导航？

就是使用js代码来进行的跳转

语法：

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

目标：用JS代码来进行跳转？？？？？？？？？？？？

4.0 编程式导航 - 基础使用

具体的步骤：

1.在main.js中配置

2.绑定点击事件--方法里面传参（路由路径，路由名字），

3..在方法里面书写业务代码

代码展示：

//main.js - 路由数组里, 给路由起名字
{
    path: "/find",
    name: "Find",
    component: Find
},
{
    path: "/my",
    name: "My",
    component: My
},
{
    path: "/part",
    name: "Part",
    component: Part
},

App.vue - 换成span 配合js的编程式导航跳转

<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="btn('/part', 'Part')">朋友</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - js方式跳转路由
// 语法:
// this.$router.push({path: "路由路径"})
// this.$router.push({name: "路由名"})
// 注意:
// 虽然用name跳转, 但是url的hash值还是切换path路径值
// 场景:
// 方便修改: name路由名(在页面上看不见随便定义)
// path可以在url的hash值看到(尽量符合组内规范)
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    }
  }
};
</script>

注意：使用的是$router不是$routes面试）

$router:为整个路由对象

$routes：为当前的路由的验证规则。

4.1编程式导航传参

语法 query / params 任选一个

语法：

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

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

代码展示：

<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="oneBtn">朋友-小传</span>
      <span @click="twoBtn">朋友-小智</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - 跳转路由传参
// 方式1:
// params => $route.params.参数名
// 方式2:
// query => $route.query.参数名
// 重要: path会自动忽略params
// 推荐: name+query方式传参
// 注意: 如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    },
    oneBtn(){
      this.$router.push({
        name: 'Part',
        params: {
          username: '小传'
        }
      })
    },
    twoBtn(){
      this.$router.push({
        name: 'Part',
        query: {
          name: '小智'
        }
      })
    }
  }
};
</script>

1）路径的传参

建议：使用params+name

2）问号拼接的传参（推荐使用query）

5.路由嵌套（重点）

步骤：1.新建二级页面--创建需要用的所有组件

2.在一级页面中引入和使用

一级的路径（path）根路径后面直接写的，其后的多级路径需要在此基础上用/拼接

3.在main.js里面配置---导入路径

一级路由path从/开始定义

二级路由往后path直接写名字, 无需/开头

嵌套路由在上级路由的children数组里编写路由信息对象

注：配置的时候是相对路径。

具体步骤代码展示：

总结: 嵌套路由, 找准在哪个页面里写router-view和对应规则里写children

-----------------------------------------------------------------------------------------------

5.1 声明导航 - 类名区别

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

观察路由嵌套导航的样式

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

1）精确匹配：

2）模糊匹配：

目的：方便加类名匹配

问题：学习这个匹配的目的是什么呢？

问题: 如何给路由添加一个权限判断?

5.2 全局前置守卫（重要）--权限守卫

在第五步后面写

补充：导航是路由的守卫，在哪new就在哪写。

如果没有登录给跳转另外一个页面

// 目标: 路由守卫
// 场景: 当你要对路由权限判断时
// 语法: 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() // 正常放行
  }
})

总结: next()放行, next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转