路由的基本概念，说说我对路由的理解，路由相关的应用

sunshine_
323 阅读4分钟

知识点自测

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

单页应用和多页应用

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

  • 一个.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传参。 适用场景：详情页

  3. 创建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
  }
]

编程式导航

目标

掌握编程式导航的使用。

编程式导航

编程式： 写代码

导航：页面跳转

编程式导航 ====> 写代码的方式来让页面跳转

API

// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})

// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
    path: "路由路径",
    query: {
        "参数1":值1,
        "参数2":值2
    }
})

// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
    name: "路由名称",
    params: {
        "参数1":值1,
        "参数2":值2
    }
})


// 后退
$router.back()

小结

路由嵌套

原理：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来实现嵌套。




案例-模拟网易云音乐效果

二级路由示例-网易云音乐-发现音乐下

思路：

  1. 创建路由需要的所有页面组件=> 两个一级路由和三个二级路由
    • src/views/MyMusic.vue     --  我的音乐页-1
    • src/views/FindMusic.vue   --  发现音乐页-2
      • src/views/Child/Recommend.vue    --  发现音乐页 / 推荐页面-2-1
      • src/views/Child/Ranking.vue           --  发现音乐页 / 排行榜页面-2-2
      • src/views/Child/SongList.vue           --  发现音乐页 / 歌单页面-2-3

  1. router/index.js中配置路由
    • 一级路由path从/开始定义
    • 二级路由path直接写名字或带上一级路由path（在对应一级路由的children数组中配置）
    • 设置默认显示某个二级路由，path和一级路由保持一致或为空
import Vue from 'vue'
import VueRouter from 'vue-router'

// 一级路由
import FindMusic from '@/views/FindMusic'
import MyMusic from '@/views/MyMusic'

// 二级路由
import Recommend from '@/views/Child/Recommend'
import Ranking from '@/views/Child/Ranking'
import SongList from '@/views/Child/SongList'

Vue.use(VueRouter)

const routes = [
    {
        path: "/",
        redirect: "/find"
    },
    {
        path: "/find", // 一级路由
        component: FindMusic,
        // find下的二级路由
        children: [
              {
                path: "/find", // 和父路由路径一样，默认加载这个路由
                component: Recommend
              },
              {
                path: "/find/ranking",
                component: Ranking
              },
              {
                path: "/find/songlist",
                component: SongList
              }
        ]
    },
    {
        path: "/my",
        component: MyMusic
    }
];

const router = new VueRouter({
    routes
})

export default router
  1. App.vue - 一级导航和路由展示
<template>
  <div>
    <div>
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
    </div>
    <div style="border: 1px solid orange">
      <!-- 一级路由挂载点 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.router-link-active{
  color: orange;
}
</style>
  1. FindMusic.vue - 设置二级导航和二级路由显示位置
<template>
  <div>
    <p>发现音乐 - 页面</p>
    <div>
      <router-link to="/find">推荐</router-link>
      <router-link to="/find/ranking">排行榜</router-link>
      <router-link to="/find/songlist">歌单</router-link>
    </div>
    <div style="border: 1px solid red; padding: 20px solid block;">
         <!-- 二级路由挂载点 -->
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

说明：

  • App.vue, 外层的router-view负责发现音乐和我的音乐页面切换
  • FindMusic.vue 内层的router-view负责发现音乐下的子路由页面切换

路由守卫-全局前置守卫

pageA -----守卫----> pageB

目标: 路由跳转之前, 会触发一个函数

语法：router.beforeEach((to, from, next) => {})

案例: 在跳转路由前, 判断用户登陆了才能去<我的音乐>页面, 未登录弹窗提示回到发现音乐页面

实现：

  • 在router/index.js 路由对象上使用固定方法beforeEach
// 路由守卫
// 每次页面跳转，都会执行这个回调
router.beforeEach((to, from, next) => {
  console.log(to, from)
  // to代表要跳转到哪个路径去, to的值是个对象可以打印看到
  // from代表从哪个路径跳过去
  // next是一个函数。 
  //   next()             放行；
  //   next('路由地址')    跳到指定的位置


  // 判断，是否有权限去访问页面，如果没有权限，跳转到登录页
  const token = localStorage.getItem('token') // 假设token

  // 访问login不要token，其他都要
  if(to.path === '/login'){
    next()
  } else {
    // 不去login，就要检查一下证件
    if(token){
      next() // 有token就正常访问
    } else {
      next('/login')
    }
  }
})

补充/login对应的页面

<template>
<div>
  <h2>登录</h2>
  <button @click="login">芝麻开门</button>
  </div>
</template>

<script>
  export default {
    methods: {
      login(){
        // 1. 设置token
        localStorage.setItem('token', '123')
        // 2. 页面跳转
        this.$router.push('/find/list')
      }
    }
  }
</script>

全局后置守卫

目标: 路由跳转后, 触发的函数

语法：router.afterEach((to, from) => {})

使用：

router/index.js - 添加

router.afterEach((to, form) => {
    console.log(to);
    console.log(form);
    console.log("路由发生了跳转");
})

路由模式设置

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

模式文档

router/index.js

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

history和hash模式对比：

  1. 功能一样（跳转页面）
  2. history模式的path路径不带#号，hash有#号
  3. hash模式兼容性好
avatar
文章
阅读
粉丝