03-vue路由(全家桶03)

路由:主要是可以实现单页面应用

1.1-路由及工作原理介绍

  • 前端路由和后端路由不是同一个东西,不要搞混淆

    • 后端路由:url地址后端逻辑的对应关系

    • 前端路由:url地址组件的对应关系

  • 1.前端中的路由 : 不同的路径对应加载不同的页面,且页面不会跳转

    • 路由的功能类似于tab切换,但是更加的高级,性能更好

  • 2.路由的工作原理 : 监听网页hash值变化

    • (1)修改网页的hash值

      • hash值原本的作用是来做锚点定位的,它有一个特点就是页面不会跳转

    • (2)给window注册onhashchange事件,监听hash值变化

      • 当页面hash变化时,就会执行这个事件处理函数,然后就可以根据不同hash值加载不同页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.前端中的路由 : 不同的路径对应加载不同的页面,且页面不会跳转
        2.路由的工作原理 : 监听网页hash值变化
            (1)修改网页的hash值  
                * hash值原本的作用是来做锚点定位的,它有一个特点就是页面不会跳转
            (2)给window注册onhashchange事件,监听hash值变化
                * 当页面hash变化时,就会执行这个事件处理函数,然后就可以根据不同hash值加载不同页面

     -->
    <!-- 1.点击按钮:修改地址栏的hash值 -->
    <button onclick="window.location.hash = '#/a'">按钮1</button>
    <button onclick="window.location.hash = '#/b'">按钮2</button>
    <button onclick="window.location.hash = '#/c'">按钮3</button>
    <div id="box">
        我是组件
    </div>

    <script>
        //2.给页面注册hash值变化事件
        window.onhashchange = function(){
            if(window.location.hash == '#/a'){
                box.innerHTML = '<p>我是组件A</p>';
            }else if(window.location.hash == '#/b'){
                box.innerHTML = '<p>我是组件B</p>';
            }else if(window.location.hash == '#/c'){
                box.innerHTML = '<p>我是组件C</p>';
            }
        };
    </script>
</body>
</html>

1.2-单页面应用SPA介绍

  • singal page application

    目标: 了解什么是单页面应用, 以及前端路由作用

单页面应用: 所有功能在一个页面上实现

前端路由: 实现业务场景切换

经典单页面应用案例:网易云音乐

单页面-多页面对比

对比部分单页应用多页面应用
组成一个html文件多个组件组成多个html文件
静态资源共用共用,一次性加载完毕不共用,每个页面都加载一遍
刷新方式页面局部刷新整页加载
url模式itcast.com/#/pageoneitcast.com/pageone.html
用户体验用户体验良好页面切换加载缓慢体验较差
数据传递容易依赖url传参,cookie,localStorage
搜索引擎优化不利于seo优化,需要ssr优化(服务端渲染)支持良好
使用场景追求高体验 不要求seo高度要求seo
开发成本较高 需要依赖专业的框架, 开发效率高较低 重复代码多, 开发效率低

优点:

  • 整体不刷新页面,用户体验更好

  • 数据传递容易, 开发效率高

缺点:

1.3-vue路由使用流程

给vue添加路由有三种方式

以下两种实际开发推荐(自动配置一条龙服务)

(1)vueui 创建脚手架的勾选 vue-router选项

(2)在根目录执行: vue add router

这个命令可以让你原本没有配置路由的项目,一键配置。与vueui作用一致

以下方式实际开发不推荐,但是学习vue路由必须要掌握的(工作中可以不写,但是不能不知道)

(1)手动根据官方文档完整配置路由6个步骤

(2)能够使用模块化语法把路由封装到 ./router/index.js 文件中

  • 路由完整配置六个流程

    • 1.导入组件
    • 2.创建routes路由规则(路径和页面一一对应)
    • 3.创建路由对象
    • 4.把路由对象挂载到App.vue
    • 5.在页面写路由导航router-link (生成a标签)
    • 6.在页面写路由出口router-view (生成占位盒子,用于显示页面内容)

  • vue路由官方文档:Vue Router

    • vue本身不提供路由功能,而是由vue团队提供的Vue Router插件完成,因此Vue Router也称之为vue全家桶中的一员

  • 最简单的一键生成路由的方式:使用vue ui创建项目的时候,只需要勾选Router选项即可

    • 什么导包,什么配值,全部给你一条龙搞定!

  • 开发成本高(需要学习路由)

  • 首次加载会比较慢一点。不利于seo搜索引擎优化

总结: 单页面应用, 用户体验好, 开发效率高

url和组件的对应关系

  1. 不同于功能类的组件,路由管理的组件一般放在/views目录

    1.1 /views目录:放组件的地方,这里的组件一般对应页面级别(整个页面)

    1.2 /components目:也是放组件的地方,这里的组件一般对应需要复用的页面局部内容

  2. 路由管理的组件都是页面级别

    1. 一般路由管理跳转的组件都是页面级别,放入views文件夹中

  3. 属性:

    1. path:地址

    2. component:组件

    3. name:类似于组件的name属性,可以省略

  • 1.传统导入: 不管这个组件你用不用,都会加载

  • 2.懒加载导入:只有访问的时候才会导入,不访问就不导入

    • 牺牲时间换空间:第一次加载慢一点点(一丢丢),但是可以节省内存空间

  • 3.两者选择取决于这个页面一般用户访问的多不多。 多就用传统导入,少就用懒加载导入

手动加个页面

  1. views目录下添加一个组件,比如list.vue

  2. /router/index.js中导入组件并配置规则

  3. App.vue中顶部添加一个router-link并设置to属性即可

  4. 切换到浏览器,点击切换看看

<template>
  <div class="list-container">
    <h2>列表页</h2>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'list'
}
</script>

<style>
.list-container {
  overflow: hidden;
}
</style>

 

  1. 前端路由指的是地址和什么的对应关系?

    组件(页面)

  2. router-link的作用?

    路由跳转

  3. router-view的作用?

    路由内容显示

  4. 路由管理的页面(组件)一般放在哪个目录下?

    /views文件夹

1.4-路由模式

官网介绍:不同的历史模式 | Vue Router

路由有两种模式

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

1.5-路由重定向

路由重定向官方文档:重定向和别名 | Vue Router

  • 重定向应用场景: 页面输入根路径/ , 自动跳转到首页

  • 注意点 : 重定向只是修改路径, 还需要单独去设置路由匹配规则

const routes = [
  {
    path: '/',
    /* 
    (1)重定向只是修改页面路径。  输入 / 会重定向到 /find
    (2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向,还需要单独设置匹配规则
    */
    redirect: "/find"
  },
  {
    path: '/find',
    name: 'find',
    component: find
  },
]

1.6-404重定向

  • 1.*的作用类似于通配符:表示任意路径

  • 2.默认情况下,当我们输入网址的时候。 vue会从routes数组中依次去匹配路径,如果上面的全部无法匹配就会跳转*对应的组件页面

    • 这一点跟nodejs那个404的原理基本类似

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

02-vue路由跳转传参

共四种方式,常用的只有两种。学习阶段四种都要学习,重点掌握其中两种即可

第一种:

发送参数(跟之前ajaxget参数类似)

<router-link to="/path?key=value"></router-link>

接收参数: $route.query.key

第二种:

发送参数:其实跟第一种底层原理是一样,但是用js来写的。(相当于 a标签href和window.location.href一样,底层原理都是修改地址栏href. 区别是一个是a标签,一个是js代码)

this.$router.push({path: "/path", query: {key: value}})

接收参数:$route.query.key

跳转方法传参位置路由规则接收
<router-link to="/path?key=value"></router-link>/path?key=value无特殊$route.query.key
<router-link to="/path/值"></router-link>/path/值/path/:key$route.params.key
this.$router.push({path: "/path", query: {key: value}})query的对象无特殊$route.query.key
this.$router.push({name: "com", params: {key: value})params的对象路由规则需要name属性$route.params.key(注意,这种在内存中保存)

1.1-vue动态路由匹配(声明式导航)

  • 动态路由匹配官方文档:带参数的动态路由匹配 | Vue Router

  • 动态路由匹配(又叫声明式导航)介绍

    • 作用:实现get方式传参

      • 看起来像是get传参,实际上是给组件传值

  • 动态路由匹配传参分为三个流程

    • 1.定义路由规则

    • 2.传递参数

    • 3.接收参数

  • 1.定义路由规则

    • 两个都要写哟,否则只能params传参,无法query传参

{
    path: '/friend',
    name: 'friend',
    component: friend
},
{
    path: '/friend/:name/:age',
    name: 'friend',
    component: friend
},

2.传递参数

  • 标准写法(query传参): /path?参数名=值

  • 简洁写法(params传参): /path/参数值1/参数值2

3.接收参数

  • 如果是标准写法,这样接收参数: $route.query.参数名

  • 如果是简洁写法,这样接收参数:$route.params.参数名

1.2-vue路由的编程式导航

声明式导航和编程式导航区别

1.声明式导航: 通过a标签href跳转传参

* 需要在路由中单独配置:  /path:/参数名
* params参数在url可以看到(url传参),刷新不会消失

2.编程式导航:通过js代码来跳转传参

  • 不需要在路由单独配置

  • params参数在url看不见(内存传参),刷新会消失

  • 编程式导航官方文档:编程式导航 | Vue Router

  • 编程式导航介绍

    • 1.作用 : 使用js代码是做路由跳转 (替代router-link)

    • 2.语法 :

      • $router.push('路径')

      • $router.push({name:'组件name'})

    • 3.应用场景:如果希望满足条件才跳转,就可以使用编程式导航

      • router-link :相当于a标签,只要点击就会跳转,没有逻辑

      • $router.push('路径'):相当于window.location.href,使用js来做业务逻辑

1.3-编程式导航传参

  • 官方文档:路由属性

  • 动态路由匹配介绍

    • 1.作用 : 跳转路由时给组件传参

      • 类似于以前跳转页面window.location.href传参

    • 2.语法

      • 语法1:通过路径传参(刷新页面还在),写在query中

        • // 分开写,变成 /地址?key=value
          this.$router.push({ path: '路由地址', query: { key: 'value' }})
          // 直接写
          this.$router.push({ path: '路由地址?key=value&key2=value2'})
        • 对应路由接收this.$route.query.key 取值

      • 语法2:通过params传参(内存传递,刷新页面就不在了)

        • // 通过路径跳转
          this.$router.push({ path: '路由地址', query: { key: 'value' }})
          // 通过名字跳转
          this.$router.push({name: '路由name' , params: { key: 'value' }})
        • 对应路由接收this.$route.params.key 取值

    • 3.应用场景:相当于跳转 页面(组件的html) 传参

this.$routerthis.$route是否一样?

  1. 不是

  2. this.$router,可以用来跳转

  3. this.$route,可以获取参数

03-二级路由(嵌套路由)

嵌套路由官方文档:嵌套路由 | Vue Router

1.为什么要有二级路由

  • 点击导航栏切换页面的时候(PC端导航栏一般在顶部,移动端导航栏一般在底部),如果该页面又需要出现导航栏。这个时候就需要嵌套路由.

  • 2.配置二级路由规则

    • 二级路由页面,一般会放在./views/子目录

  • ./router/index.js中导入二级路由页面

    • 注意路径别写错了哈

二级路由path有/和没有/区别

如果有/,例如 /Ranking : 可以省略一级路由路径,直接通过 /Ranking访问二级路由

如果没有/,例如 Ranking : 不可以省略一级路由路径,需要通过 /find/Ranking访问二级路由

04-路由导航守卫

1.1-路由导航守卫语法介绍

刚开始接触路由导航守卫你会发现和axios拦截器有点像,实际上它们是两个不同的东西。

1.相同点

(1)都是钩子函数(回调函数的一种,到某个时机了自动触发)

(2)都是起到拦截作用

2.不同点

(1)功能不同 : axios拦截器拦截网络请求, 导航守卫拦截路由跳转

(2)应用场景不同 :

axios拦截器一般用于发送token

导航守卫用于页面跳转权限管理(有的页面可以无条件跳转,例如商城首页可以无条件跳转。有的页面需要满足条件才能跳转,例如购物车页面就需要用户登录才可以跳转)

  • 官网文档:路由导航守卫

  • 1.什么是路由导航守卫? : 通俗来讲,就是路由跳转的时候需要执行的一个回调函数

    • 路由导航:就是路由跳转的意思

    • 守卫:类似于门卫,你做某件事之前会对你进行一个检查

  • 2.为什么要有路由导航守卫

    • 在项目开发中,并不是每一个路由跳转都是明确的。 例如很多页面跳转需要登录判断,如果你有登录,则跳转到指定页面,没有登录则跳转到登录页面。

      • 举例子:我想进小区(个人信息),门卫(导航守卫)会检查我有没有做核酸(是否登录),如果做了就让我进去(跳转个人信息)。没做就让我去核酸点(登录页面)做完核算才可以进去。

  • 3.路由导航守卫有哪些?

    • 前置守卫:跳转前执行

    • 后置勾子:跳转后执行

  • 导航守卫语法介绍(导航守卫需要创建完路由对象之后才能使用):

    • ==一定要注意,在导航守卫中必须要调用next()否则你的路由无法跳转==

1.2-使用导航守卫完成登录页面跳转

项目开发中,并不是每一个页面都需要做登录页面跳转的。以网易云为例

1.首页: 不需要登录判断,任何用户都能访问

2.我的朋友:需要做登录判断。

  • 实现登录页面路由导航守卫

    • 一般判断页面最好用 组件的name属性,因为path有时候后面会拼接参数

      • 这个地方可以提现name属性作用哟

    • 路由导航守卫一定要写在创建router之后哈

      • 因为这个给router挂载的钩子

05-组件缓存keep-alive

1.为什么要有组件缓存

  • (1)路由切换时, 消失的页面, 会被销毁, 触发destroyed

  • (2)再切换回来, 重新创建, 所有代码重新执行, 效率不

1.1-组件缓存基本使用

  • 给router-view外面包裹Vue自带的keep-alive标签即可

  • 默认情况下,会缓存所有组件

1.2-缓存指定组件

  • 在keep-alive的时候, 使用include/exclude区分即可

1.3-组件缓存勾子

  • 官方文档:https://cn.vuejs.org/v2/api/#activated

  • 问题:组件不执行销毁/初始化创建的方法了, 如何知道组件被失去激活/激活呢?

    • 使用组件缓存勾子即可

    • activated --- 组件被激活状态

    • deactivated --- 组件被失去激活状态

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值