前端路由

劉溜溜
344 阅读4分钟

路由理解的概念

路由：就是一一对应关系的集合。

前端路由（单页应用程序）： 一个url地址，对应哪个组件

后端路由：一个接口地址，对应哪一段接口地址

前端路由

image.png

后端路由

image.png

前端路由工作原理

根据地址栏变化（不重新向服务器发请求），去局部更新不同的页面内容，完成前端业务场景切换。

背景知识

  • 地址栏中的hash值
    • hash是url的一部分。
    • hash的变化不会引起页面的刷新。
    • hash可以通过window.onhashchange监听到。

实现原理

  • 监听onhashchange的变化。
  • 写配置规则：hash是xxx时，去加载什么组件

路由-官方路由基本使用

vue-router官方文档

说明⚠️：如果使用vue-cli创建项目，没有选择路由插件，需要单独安装和配置

步骤

  1. 安装包
  2. 配置路由
  3. 使用路由

操作

  1. 安装 npm i vue-router@3.5.3

  2. 创建路由文件

router/index.js

// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用插件 - 重要
Vue.use(VueRouter)

// 导入组件

import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'


// 创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
      component: Page1  // 装入组件 Page1
    },
    {
      path: "/page2",
      component: Page2
    },
    {
      path: "/page3",
      component: Page3
    }
  ]
})

export default router
  1. 使用路由 在main.js中
import router from './router/index.js'

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

使用路由

<router-view></router-view>

图示

image.png

链接导航-router-link

Router-link组件介绍

作用： 用于提供路由链接，实现页面跳转

格式: <router-link to="/home">首页</router-link>

要点：

  • 是vue-router提供的组件
  • router-link最终会渲染成a链接
  • router-link自带链接导航高亮的功能

示例

<template>
  <div>
    <h1>App组件</h1>
    <ul>
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/movie">电影</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

如果匹配当前的path，它会自己生成两个class：

router-link-exact-active router-link-active

小结

链接导航, 用router-link配合to, 实现点击切换路由

  • router-link组件会被vue解析成a标签，但不能直接通过a标签来跳转。
  • 如果当前路由被激活会添加特殊的类名。

路由-重定向

理解

重定向， 用户访问的是A地址，系统把它切换到B地址。

应用场景：改变默认访问页面的行为

示例

在router/index.js - 修改配置

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  }
]

路由404

统一处理异常地址：那些个正常配置的地址之外的地址。

代码

修改路由规则即可：

通过通配符*，设置404页面

import NotFound from "@/components/NotFound";

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  },
  
  // ...正常路由
  
  { // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
    path: "*",
    component: NotFound
  }
]

06_路由

知识点自测

\

  • url的组成部分都有哪些, hash值指的什么

\

今日学习目标

\

  1. 能够了解单页面应用概念和优缺点
  2. 能够掌握vue-router路由系统使用
  3. 能够掌握链接导航和编程式导航用法
  4. 能够掌握路由嵌套和路由守卫

\

单页应用和多页应用

\

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

  • 一个.html文件
  • 前端路由
  • 组件化开发

网易云音乐 小米移动端

多页应用：与单页应用相对应的，不同的功能通过不同的页面来实现

\

单页面-多页面对比

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

\

\

路由

\

\

vue路由官网

\

路由理解的概念

\

路由：就是一一对应关系的集合。

前端路由（单页应用程序）： 一个url地址，对应哪个组件

后端路由：一个接口地址，对应哪一段接口地址

\

\

前端路由

后端路由

\

\

前端路由工作原理

\

目标

前端路由的本质, 对url的hash值进行改变和监听，切换对应页面组件的dom结构

\

演示

网易云音乐的一级路由切换, 路径对应下面不同的组件页面

\

分析

根据地址栏变化（不重新向服务器发请求），去局部更新不同的页面内容，完成前端业务场景切换

\

背景知识

地址栏中的hash值

思路

\

  1. URL 地址栏中的 Hash 值发生了变化
  2. 前端js监听了到 Hash 地址的变化 window.onhashchange=()=>{}
  3. 前端js把当前 Hash 地址对应的组件渲染都浏览器中

\

前端路由简单实现

\

  1. src/views/创建并在App.vue里导入和注册组件
    MyHome.vue
    MyMovie.vue
    MyAbout.vue

\

<script>
import MyAbout from './views/my-about.vue'
import MyHome from './views/my-home.vue'
import MyMovie from './views/my-movie.vue'
export default {
  components: {
    MyHome,
    MyAbout,
    MyMovie
  }
}
</script>

\

  1. 通过动态组件, 控制要显示的组件

\

<template>
  <div>
    <h1>App组件</h1>
    <component :is="comName"></component>
  </div>
</template>

<script>
export default {
  // ...省略其他
  data () {
    return {
      comName: 'MyHome'
    }
  }
}
</script>

\

  1. 声明三个导航链接, 点击时修改地址栏的 hash 值

\

<template>
  <div>
    <h1>App组件</h1>
    <a href="#/home">首页</a>&nbsp;
    <a href="#/movie">电影</a>&nbsp;
    <a href="#/about">关于</a>&nbsp;
    <component :is="comName"></component>
  </div>
</template>

\

  1. 在 created 中, 监视地址栏 hash 时的变化, 一旦变化, 动态切换展示的组件

\

created () {
  window.onhashchange = () => {
    switch(location.hash) {
      case '#/home':
        this.comName = 'my-home'
        break
      case '#/movie':
        this.comName = 'my-movie'
        break
      case '#/about':
        this.comName = 'my-about'
        break
    }
  }
},

\

小结

改变浏览器url的hash值, JS监听到hash值改变, 把对应的组件显示到同一个挂载点

\

路由-官方路由基本使用

目标

学会vue官方提供的vue-router路由系统功能模块使用

\

vue-router文档

\

说明⚠️：如果使用vue-cli创建项目，没有选择路由插件，需要单独安装和配置

步骤

  1. 安装包
  2. 配置路由
  3. 使用路由

\

操作

  1. 安装 npm i vue-router@3.5.3
  1. 创建路由文件

router/index.js

// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用插件 - 重要
Vue.use(VueRouter)

// 导入组件

import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'


// 创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
      component: Page1  // 装入组件 Page1
    },
    {
      path: "/page2",
      component: Page2
    },
    {
      path: "/page3",
      component: Page3
    }
  ]
})

export default router
  1. 使用路由 在main.js中
import router from './router/index.js'

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

\

使用路由

\

<router-view></router-view>

\

测试

在地址栏中输入地址来访问

图示

小结

下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由

\

链接导航-router-link

目标

掌握router-link的用法

Router-link组件介绍

作用： 用于提供路由链接，实现页面跳转

格式: <router-link to="/home">首页</router-link>

要点：

  • 是vue-router提供的组件
  • router-link最终会渲染成a链接
  • router-link自带链接导航高亮的功能

示例

\

<template>
  <div>
    <h1>App组件</h1>
    <ul>
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/movie">电影</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

\

激活类名

router-link-exact-active router-link-active

小结

链接导航, 用router-link配合to, 实现点击切换路由

  • router-link组件会被vue解析成a标签，但不能直接通过a标签来跳转。
  • 如果当前路由被激活会添加特殊的类名：

\

页面跳转传参

\

目标

掌握跳转传参的方式

\

回顾

html页面之间如何传参？ =》url?key=val&key=val

vue路由传参的方式

两种方式：

  1. query传参。 适用场景：页面搜索
  2. params传参。 适用场景：详情页

\

  1. 创建components/MyGoods.vue - 准备接收路由上传递的参数和值
<div>
    你要浏览的商品是: {{ $route.query.name }} {{ $route.params.goodsId}}
</div>
  1. 路由定义
{
    path: "/goods",
    component: MyGoods
  },
  {
    path: "/goods/:goodsId",
    component: MyGoods
  },
  1. 导航跳转, 传值给MyGoods.vue组件
<li><router-link to="/goods?name=外套">外套</router-link></li>
<li><router-link to="/goods/123">详情</router-link></li>

图示-查询字符串

图示-params传参

\

小结

?key=value =》  用$route.query.key 取值

/值-需要提前在路由规则/path/:key =》  用$route.params.key  取值

\

路由-重定向

目标

掌握路由重定向的用法

\

理解

重定向， 用户访问的是A地址，系统把它切换到B地址。

应用场景：改变默认访问页面的行为

\

示例

\

在router/index.js - 修改配置

\

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  }
]

\

路由404

统一处理异常地址：那些个正常配置的地址之外的地址。

代码

修改路由规则即可：

通过通配符*，设置404页面

import NotFound from "@/components/NotFound";

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  },
  
  // ...正常路由
  
  { // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
    path: "*",
    component: NotFound
  }
]

路由嵌套

原理：router-view中再次包含router-view。

背景：一个组件内部包含的业务还是很复杂，需要再次进行拆分。

格式：

routes:[
  {
    path: '/page1', 
    component: Page1, // 这个组件内部还有router-view
    children: [
      {
        path:'',  // path为空，表示当 #/page1时，显示 Page1组件+组件1
        component: 组件1  // 
      },
      {
        path:'/xx1', // path以/开头，表示当 #/xx1时，显示 Page1组件+组件2
        component: 组件2
      },
      {
        path:'xx2', // path以/开头，表示当 /page1/xx2时，显示 Page1组件+组件3
        component: 组件3
      }
    ]
  }
]

总结：

  1. 在已有的路由容器中，再实现一套路由，再套一个路由容器，叫：嵌套路由。
  2. 嵌套路由除了 router-view 之间需要嵌套，路由规则也需要通过children来实现嵌套。
avatar
文章
阅读
粉丝