Vue学习 06 Vue Router

最新推荐文章于 2025-04-07 17:14:17 发布
原创 最新推荐文章于 2025-04-07 17:14:17 发布 · 1k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文详细介绍了VueRouter在SPA应用中的使用，包括基本路由配置、嵌套路由、路由参数传递、命名路由、编程式导航、缓存组件、路由守卫以及hash和history模式的区别。同时提到了VueUI组件库的选择和使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue学习

Vue 06 Vue Router

生活中的路由器：路由器的每一个网线接口，都会对应一个设备

多个路由得由一个路由器进行管理

在这里插入图片描述

01 引入

路由就是一组 key-vaule 的对应关系

多个路由，需要经过路由器的管理

编程里的路由，为了实现 SPA （single page web application）

在这里插入图片描述
在这里插入图片描述

02 概念

Vue-router

vue的一个插件库，专门用来实现SPA应用

SPA

对SPA应用的理解：

1、单页Web应用(single page web application，SPA)

2、整个应用只有一个完整的页面。 index.html

3、点击页面中的导航链接不会刷新页面，只会做页面的局部更新

4、数据需要通过ajax请求获取。

注：Ajax 技术，在不刷新整个页面的情况下更新网页内容。

路由

什么是路由？

  • 一个路由就是一组映射关系
  • key为路径，value可能是 function 或者 component

路由分类

  • 后端路由

    ① 理解：value是function，用于处理客户端提交的请求

    ② 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。

  • 前端路由

    ① 理解: value是component，用于展示页面内容

    ② 工作过程:当浏览器的路径改变时，对应的组件就会显示

03 基本路由

  • 安装 vue-router： npm i vue-router

2022年2月7日之后，vue-router的默认版本为4版本，vue-router4只能在vue3中使用，vue-router3只能在vue2中使用。因为当前教学视频使用的是vue2，所以在下载vue-router的时候要特地知名版本。npm i vue-router@3

vue-router是一个插件库，所以要用 vue.use使用

  • 引入、使用 vue-router

在这里插入图片描述

在 src 下 新建一个 文件夹 router 和 index.js 文件

在这里插入图片描述

import VueRouter from 'vue-router'

引入之后，VueRouter当作构造函数使用

  • 具体文件

在这里插入图片描述

src/router/index.js

// 该文件专门用于创建整个应用的路由器

// 【引入VueRouter】要使用VueRouter就要先引入，VueRouter是一个构造函数
import VueRouter from 'vue-router'

// 【使用VueRouter】
import Vue from 'vue'
Vue.use(VueRouter)

// 【引入组件】（因为配置路由要指定组件）
import About from '../components/MyAbout.vue'
import Home from '../components/MyHome.vue'

// 创建并暴露一个路由器
export default new VueRouter({
  routes: [
    // 每一个配置对象都是一个路由
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App.vue'

// 关闭vue的生产提示
Vue.config.productionTip = false

// 引入路由
import router from './router/index'

new Vue({
  el: '#app',
  render: h => h(App),
  router // 让 vm 和每个vc都可以使用路由
})

App.vue

<router-view></router-view>指定组件的呈现位置

原始HTML中我们使用a标签实现页面的跳转（但是页面会刷新），这里使用<router-link></router-link>，其中 to 属性指定跳转的路由，如to=“/about” ；属性 active-class="active"指定点击之后谁会被加上active类

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始HTML中我们使用a标签实现页面的跳转（但是页面会刷新 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a> -->

          <!-- 最终在页面中转换为a标签 -->
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


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

使用总结

1、安装vue-router，命令 npm i vue-router

2、引入import VueRouter from ‘vue-router’

应用插件 Vue.use(VueRouter)

3、编写router配置项： src/router/index.js中配置

4、实现切换（active-class可以配置高亮样式）

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>

5、指定展示位置

<router-view></router-view>

注意事项

1、一般把路由组件放在 pages 文件夹里面。一般组件放在 components 文件夹里面

2、通过切换，“隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。可以在组件里面用生命周期函数 mounted、beforeDestroy验证

3、每个组件都有自己的$route属性，里面存储着自己的路由信息

4、整个应用只有一个router，可以通过组件的$router属性获取到

在这里插入图片描述

04 嵌套(多级)路由

1、配置路由规则，使用children配置项

二级路由的path里不可以写斜杠（/）

// 【引入组件】（因为配置路由要指定组件）
import About from '../pages/MyAbout.vue'
import Home from '../pages/MyHome.vue'
// 二级路由
import News from '../pages/MyNews.vue'
import Message from '../pages/MyMessage.vue'

// 创建并暴露一个路由器
export default new VueRouter({
  routes: [
    // 每一个配置对象都是一个路由
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news', // 【注意】这里不可以写斜杆
          component: News
        },
        {
          path: 'message',
          component: Message
        }
      ]
    }
  ]
})

2、跳转（要写完整路径）

<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>

05 路由传参

query参数

在这里插入图片描述

  • 跳转路由并携带query参数，to的字符串写法
<router-link :to="`/home/message/detail?id=${item.id}&title=${item.name}`">{{item.name}}</router-link>&nbsp;&nbsp;

这里 to前面一定要写冒号，表示绑定，是双引号里面的值。然后双引号里面写单引号，:to表示 ``绑定了反引号的字符串，再用模板字符串进行编写。

  • 跳转路由并携带query参数，to的对象写法
<router-link :to="{
          path:'/home/message/detail' ,
          query: {
            id: item.id,
            name: item.name
          }
        }">
          {{item.name}}
        </router-link>

  • 在 下面的组件中

    this. r o u t e . q u e r y . i d 和 t h i s . route.query.id 和 this. route.query.id和this.route.query.name 就可以访问到

params参数

写法一、跳转路由并携带params参数，to的字符串写法

  • Message.vue
<router-link :to="`/home/message/detail/666/你好啊`">{{item.name}}</router-link>

或者
<router-link :to="`/home/message/detail/${id}/${title}`">{{item.name}}</router-link>
  • router/index.js 占位符【必须要写】
{
  path: 'message',
  component: Message,
  children: [
    {
      name: 'xiangqing',
      path: 'detail/:id/:title',  // 占位符
      component: Detail
    }
  ]
}
  • Detail.vue

$this.route.params

<template>
  <ul>
    <li>消息编号：{{$route.params.id}}</li>
    <li>消息标题：{{$route.params.title}}</li>
  </ul>
</template>

写法二、跳转路由并携带params参数，to的对象写法（必须使用命名路由）

注意：也需要去 router/index.js 中使用占位符

<router-link :to="{
    name: 'xiangqing', // 命名路由
    params: {
      id: item.id,
      titlie: item.title
    }
  }">
    {{item.title}}
</router-link>

路由的props配置

作用：让路由组件更方便收到参数

在这里插入图片描述

如上图，当点击 message001 message002 message003的时候，想要下面的部分切换数据显示。此时只需要一个detail组件，和query参数、params参数一样，目的都是想向detail传递参数

第一种写法：

在这里插入图片描述

<template>
  <ul>
    <li>消息编号：{{$route.params.id}}</li>
    <li>消息标题：{{$route.params.title}}</li>
    <h3>{{a}}</h3>
    <h3>{{b}}</h3>
  </ul>
</template>

<script>
export default {
  name: 'MyDetail',
  props: ['a', 'b'], // 接收
  mounted() {
    console.log(this.$route);
  }
}
</script>

第二种写法：

若布尔值为真，就会把该路由组件收到的所有params参数以props的形式传递给Detail

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

第三种写法：

在这里插入图片描述

06 命名路由

作用：可以简化路由的跳转

使用：

① 给路由命名

在这里插入图片描述

② 简化跳转

在这里插入图片描述

07 router-link

作用:控制路由跳转时操作浏览器历史记录的模式

浏览器的历史记录有两种写入方式：① push追加历史记录（栈），② replace是替换当前记录。router-link默认是push模式，可以开启replace模式

<router-link :replace="true" :to="`/home/message/detail/666/你好啊`">{{item.name}}</router-link>

也可以简写replace

<router-link replace :to="`/home/message/detail/666/你好啊`">{{item.name}}</router-link>

08 编程式路由导航

作用：不借助 <router-link>实现路由跳转，让路由跳转更加灵活

具体编码：

  this.$router.push({
        name: 'xiangqing',
        params: {
          id: item.id,
          title: item.title
        }
      })
      
  this.$router.replace({
        name: 'xiangqing',
        params: {
          id: item.id,
          title: item.title
        }
      }) 

// 后退
 this.$router.back()

// 前进
 this.$router.forward()

// 正数往前进3步，负数往后退
 this.$router.go(3)

09 缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁。

引入

在这里插入图片描述

注意，MyNew组件是在MyHome组件中展示的，所以要去 MyHome.vue 文件写代码实现。具体实现如下：

在这里插入图片描述

  • 如果没有 include，就表示 router-view 里面展示的所有组件都被缓存。

  • 一定要写组件名

  • 或者用数组形式：

<keep-alive :include="['MyNews','MyMessage']">
  <router-view></router-view>
</keep-alive>

10 两个新的生命周期

  • 作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态。

  • 具体名字：

    ① activated 路由组件被激活时触发

    ② deactivated 路由组件被激活时触发

  • activated、deactivated、（nextTick）这三个生命周期函数没有在之前的生命周期图上显示。

在这里插入图片描述

11 路由守卫

Navigation Guards ：保护路由的安全。（权限）

1全局路由守卫

① 全局前置路由

需求：只有当学校为尚硅谷，才能查看 news和，message中的内容

这里为了演示，我们提前在localStorage中存储了 school：‘atguigu’

  • router/index.js
const router =  new VueRouter({
  routes: [...] })

// 【全局前置路由守卫】
// beforeEach 在每一次路由切换之前、初始化时调用
// to去哪 from从哪来
router.beforeEach((to,from,next)=>{
    // 这里也可以使用  to.name 做判断
  if(to.path === '/home/news' || to.path === '/home/message') {
    if(localStorage.getItem('school') === 'atguigu') {
      next()// 放行
    } else{
      alert('学校名不对，无权限')
    }
  } else {
    next()
  }
})

export default router

② 全局后置路由

这里补充一个meta配置(路由元信息)，里面可以自定义数据

在这里插入图片描述

  • 以全局前置路由为例
router.beforeEach((to,from,next)=>{
  if(to.meta.isAuth) {
    //如果需要鉴别权限
    if(localStorage.getItem('school') === 'atguigu') {
      next()// 放行
    } else{
      alert('学校名不对，无权限')
    }
  } else {
    next()
  }
})
  • 全局后置路由

对比前置路由，他的参数没有next

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

使用场景：跳转页面（路由）之后，修改document.title

2独享守卫

router/index.js

beforeEnter

在这里插入图片描述

3组件内守卫

beforeRouteEnter、beforeRouteLeave

在这里插入图片描述

总结路由守卫

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

12 hash模式与history模式

路由器两种工作模式 ：hash模式与history模式

注：本小节提到的哈希与数据加密无关，只是站在前端人员的角度去分析路径

注意：# 包括 # 后面的都算作路径里面的 hash值

在这里插入图片描述

特点是不会随着 http请求发给服务器。

路由器工作模式：hash模式、history模式

默认是hash

在这里插入图片描述

hash的兼容性好。

项目上线流程：

**把前端所有写的东西打包，**就是生成最纯粹的.html .css .js。怎么把我们的.vue转成这些呢？就需要借助命令。

之前我们使用 npm run serve，开了一个8080的服务器。但是当项目写完之后就应该使用命令 npm run build

在这里插入图片描述

npm run build。生成一个dist文件夹

在这里插入图片描述

这里只有一个index.html是因为我们学的就是单页面文件。

打包之后的文件需要在服务器上部署，直接双击打开是看不了的

接下来，老师使用node.js加上express框架搭建一个微型服务器，把dist部署上去

如果使用history模式，虽然路径美观，但是在请求的时候，会把hash模式下原本#后面不算做资源路径的东西，算作请求，可是后端没有这些资源，于是会报404错误。

解决方法是在后端中，node.js中一个专门的中间件 connect-history-api-fallback

总结

路由器两种工作模式 ：hash模式与history模式

1、对于一个url来说，什么是hash值?——#及其后面的内容就是hash值。

2、hash值不会包含在HTTP请求中，即: hash值不会带给服务器。

3、hash模式

​ ① 地址中永远带着#号，不美观。

​ ② 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法

​ ③ 兼容性较好。

4、history模式

​ ① 地址干净，美观

​ ② 兼容性和hash模式相比略差

​ ③ 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

Vue 07 Vue UI组件库

移动端常用UI组件库：Vant、 Cube UI、 Mint UI

PC端常用UI组件库：Element UI、IView UI

注意要学习按需引入

vue-router 路由进阶学习
人间草木
02-14 332
一、vue-router 路由跳转 1、router-link标签跳转 在html标签内使用router-link跳转，相应于超链接a标签，使用方式如下： &lt;router-link to="/"&gt;[显示字段]&lt;/router-link&gt; to：导航路径 使用示例如下： &lt;p&gt;导航 ： &lt;router-link to="/"&gt;首页...
Vue路由学习
qq_40837310的博客
02-19 1018
简介 主要介绍路由的理解和概念和Vue路由的基本使用。 路由的概念 何为路由：路由的本质是一组组key-value的对应关系，多个路由由路由器管理。 编码世界中的路由主要分为两类： 后端路由： key是路径，value是函数方法（function），用于根据不同的路径，使用不同的函数处理用户提交的请求。 工作流程是，后端服务器收到一个请求，路由器会根据请求的路径，在路由规则中找到匹配的函数来处理请求，返回数据给用户。 前端路由： key是路径，value是组件（component）。 工作流
vue路由学习
weixin_34025051的博客
11-15 290
Vue router 现在火热的框架中都具有路由（router）的功能，vue当然也不例外，vue路由功能的实现借助于官方提供的一个vue-router插件所以在写路由的第一步就是去安装这个插件顺便把vue也一起安装好 npm i -S vue vue-router然后在页面引入vue 和 vue-router 一级路由 vue路由的实现...
【Vue 学习】路由
不谷的博客
02-08 704
route【路由】router【路由器】vue-router对 SPA 应用的理解。
【Vue-路由】学习笔记
最新发布
Tom299的博客
04-07 1073
如果嫌弃router-link的两个高亮类名太长，我们可以自定义匹配类名我们可以在创建路由对象时，额外配置两个配置项和即可// 创建路由对象// 配置路由routes: [],// 自定义匹配类名})传参方式使用场景配置动态路由跳转获取查询参数传参多个参数无to=“/path?参数名=值&参数名2=值”$route.query.参数名动态路由传参一个参数/path/:参数名to=“/path/参数值”$route.params.参数名两种跳转方式跳转方式区别。
Vue路由,学习路径
qq_45935763的博客
09-14 152
vue----路由 一、创建路由标签（1.）路由标签，to代表hash地址，点击跳转展示相应的组件。 二、路由填充位 （1）、路由占位符，为要展示的路由组件占位。 三、创建组件 （1.）创建组件，根据要展示几个组件来创建个数。 四、创建路由实例对象 （1.）创建路由实例对象，routes表示多个数组的集合，path为hash地址，component:“展示的组件名”,为当前hash地址展示相应的组件名。 （2.）redirect，重定向。如当前访问的hash地址为/，则直接重定向到指定的页面。 五、把路由
vue-router官网文档学习
04-11
vue-router官网文档学习
vue学习之Vue-Router用法实例分析
11-28
本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考，具体如下： Vue-router就像一个路由器，将组件(components)映射到路由(routes)后，通过点击<router>它可以在<router>中将相应的组件渲染出来。 1、...
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
import VueRouter from 'vue-router' ``` 接着，使用 `Vue.use()` 注册 Vue Router： ```javascript Vue.use(VueRouter) ``` 接下来，你需要实例化一个 Vue Router 对象，配置你的路由规则。这通常包括模式设置（如...
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
vue-router.js
12-30
vue路由vue-router.js文件下载
vue路由教程
咸鱼起码是条鱼
05-17 378
在上面的代码中，我们使用组件创建了两个链接，分别对应着Home和About路径，然后使用组件作为路由的占位符，用于展示匹配到的组件。在上面的代码中，我们可以通过编程方式使用this.$router.push()方法进行路由跳转，或者使用动态路径绑定组件的to属性。在上述的示例中，路由路径为/user/:id，其中:id是动态的路由参数，当访问/user/1时，1将作为参数传递给User组件。：在Vue项目中，你需要创建一个路由实例，其中定义了路由的配置信息，包括URL路径和对应的组件。
Vue学习笔记之 路由路径
花朵的博客
05-24 1931
import Vue from 'vue' import Router from 'vue-router' import footer from '../components/footer' import header from '../views/header' import Hello from '../components/Hello' Vue.use(Router) e
Vue —— 路由相关知识点汇总
Bonsoir777的博客
10-16 1249
本文主要介绍 Vue中 有关路由的相关知识点。
Vue路由（vue-router）详细讲解指南
whicce的博客
11-28 2689
Vue路由（vue-router）详细讲解指南动态路由匹配：嵌套路由：路由导航两种方式： 转自：有梦想的咸鱼前端 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）：...
十分钟带你学会 Vue-router
oageux的博客
08-06 2371
十分钟带你学会Vue-router
Vue学习总结-路由
frieryumao的博客
09-26 188
Vue学习总结-路由 路由-前端路由和后端路由的概念路由-vue-router的基本使用路由-router-link的使用路由-路由redirect重定向的使用路由-设置选中路由高亮的两种方式方式1方式2路由-为路由切换启动动画路由传参-使用query方式传递参数路由传参-使用params方式传递路由参数路由-使用children属性实现路由嵌套(未解决)路由-使用命名视图实现经典布局 路由-前端...
Vue路由：Vue router
热门推荐
m0_61619549的博客
09-11 1万+
Vue Router 是 Vue.js 的官方路由解决方案。它与 Vue.js 核心深度集成，让用 Vue 构建单页应用变得轻而易举。通过它，你可以轻松地管理应用中的页面跳转、路由守卫（如登录守卫），懒加载等功能。（注意：以下介绍以 Vue Router 4 为基础，相比于Vue Router 3 引入了一些新的特性和改进）Vue Router | Vue.js 的官方路由。
VUE路由详解
peter__xu的博客
08-04 2085
目录一、路由的概念二、事前准备三、 路由的相关知识点3.1 路由的基本认识3.2 路由小案例3.3 路由模式的切换3.4 指定路由的渲染位置3.5 声明式导航3.5.1 无参模式3.5.2 传参模式3.5.3 $route 与$router的区别3.6 编程式导航3.6.1 第一种get方式3.6.2 第二种get方式3.6.3 post传参方式3.6.4 常见BUG3.7 路由重定向3.7.1 概念3.7.2 代码演示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值