Vue全家桶-前端路由

最新推荐文章于 2023-07-13 08:24:42 发布
最新推荐文章于 2023-07-13 08:24:42 发布
阅读量75 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44954571/article/details/108690190
版权

1.实现简易前端路由

<!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>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
  </head>
  <body>
    <!-- 被 vue 实例控制的 div 区域 -->
    <div id="app">
      <!-- 切换组件的超链接 -->
      <a href="#/zhuye">主页</a> 
      <a href="#/keji">科技</a> 
      <a href="#/caijing">财经</a>
      <a href="#/yule">娱乐</a>

      <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
      <!-- 可以把 component 标签当做是【组件的占位符】 -->
      <component :is="comName"></component>
    </div>

    <script>
      // #region 定义需要被切换的 4 个组件
      // 主页组件
      const zhuye = {
        template: '<h1>主页信息</h1>'
      }

      // 科技组件
      const keji = {
        template: '<h1>科技信息</h1>'
      }

      // 财经组件
      const caijing = {
        template: '<h1>财经信息</h1>'
      }

      // 娱乐组件
      const yule = {
        template: '<h1>娱乐信息</h1>'
      }
      // #endregion

      // #region vue 实例对象
      const vm = new Vue({
        el: '#app',
        data: {
          comName: 'zhuye'
        },
        // 注册私有组件
        components: {
          zhuye,
          keji,
          caijing,
          yule
        }
      })
      // #endregion

      // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
      window.onhashchange = function() {
        // 通过 location.hash 获取到最新的 hash 值
        console.log(location.hash);
        switch(location.hash.slice(1)){
          case '/zhuye':
            vm.comName = 'zhuye'
          break
          case '/keji':
            vm.comName = 'keji'
          break
          case '/caijing':
            vm.comName = 'caijing'
          break
          case '/yule':
            vm.comName = 'yule'
          break
        }
      }
    </script>
  </body>
</html>

模块化中 is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置
可以把 component 标签当做是【组件的占位符】

// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值 }

2. vue-router的基本使用

  1. 引入相关的库文件

在这里插入图片描述
2. 添加路由链接
在这里插入图片描述
.3 添加路由填充位
在这里插入图片描述
4. 定义路由组件
在这里插入图片描述
5. 配置路由规则并创建路由实例在这里插入图片描述
6. 把路由挂载到 Vue 根实例中
7.

示例

<!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>
  <!-- 导入 vue 文件 -->
  <script src="./lib/vue_2.5.22.js"></script>
  <script src="./lib/vue-router_3.0.2.js"></script>
</head>

<body>
  <!-- 被 vm 实例所控制的区域 -->
  <div id="app">
    <router-link to="/user">User</router-link>
    <router-link to="/register">Register</router-link>

    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>

  <script>
    const User = {
      template: '<h1>User 组件</h1>'
    }

    const Register = {
      template: '<h1>Register 组件</h1>'
    }

    // 创建路由实例对象
    const router = new VueRouter({
      // 所有的路由规则
      routes: [
        { path: '/user', component: User },
        { path: '/register', component: Register }
      ]
    })

    // 创建 vm 实例对象
    const vm = new Vue({
      // 指定控制的区域
      el: '#app',
      data: {},
      // 挂载路由实例对象
      // router: router
      router
    })
  </script>
</body>

</html>

3.路由重定向

在这里插入图片描述

4. vue-router嵌套路由

<!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>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }

      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 数组表示子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

5.vue-router动态路由匹配

5.1 动态匹配路由的基本用法

在这里插入图片描述

5.2 路由组件传递参数

5.2.1 props的值为布尔类型

在这里插入图片描述

5.2.2.props的值为对象类型

在这里插入图片描述

5.2.3.props的值为函数类型

在这里插入图片描述

6. vue-router命名路由

在这里插入图片描述

<!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>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>
CV工程师呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue路由的原理，配置，传参】
qq_72580318的博客
09-20 1763
例如：实现一些页面之间的互相跳转。提示：以下是本篇文章正文内容，下面案例可供参考例如：以上就是今天要讲的内容，本文仅仅简单介绍了vue路由的实现方法以及原理的使用，而vue提供了大量能使我们快速便捷地处理数据的函数和方法。
Vue的路由实现原理解析（最清晰）
quieta的博客
05-17 6981
Vue的路由实现原理解析（最清晰） 一般源码中，都会用到 window.history 和 location.hash history 实现 window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法： history.back() 与在浏览器点击后退按钮相同 history.forward() 与在浏览器中点击按钮向前相同 history.go(n) 接受一个整数作为参
reactrouter监听路由变化_浅谈vue-router：路由原理
weixin_39564524的博客
11-21 434
在单页面应用中最为显著的特点之一就是选用前端路由系统，通过更改url,但不用重新请求页面的情况下，更新视图。 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： 1.Hash --- 利用 URL 中的hash("#");　 2.利用 History interface 在HTML5中新增的方法。 在Vue中，vue-ro...
vue中路由的实现原理？
yzhlove_cs的博客
09-20 9341
vue中路由的实现原理？ 1、首先需要了解一下Vue路由分为两种，一种是哈希路由，其最明显的特征是URL地址带‘#’号的，其实对地址栏也就不怎么美观一点。其次是history路由也就是URL不带‘#’号的地址，也就是我们比较常见的地址。 2、为什么要了解Vue路由的实现原理呢？其实我们都知道Vue 构建的单页面应用，其实根据路由地址的不同渲染不同的组件，在无刷新的前提下进行组件切换，根据路由地址切换不同的组件 下面介绍一下简单的例子来了解Vue路由的实现原理 <template> <d
VUE路由的原理
路人贾！
07-13 558
VUE路由的原理
vue-router路由模式详解
weixin_30522095的博客
06-06 316
一、路由模式解析 　　要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。 　　如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求的，使用起来就好...
13_Vue全家桶 - Vue-Router详解.pptx
最新发布
01-25
随着Web应用的发展，路由的概念从后端路由逐渐演变为前端路由，Vue Router 作为前端路由的一种实现，扮演着至关重要的角色。 在早期的网站开发中，后端路由占据了主导地位。当用户访问一个URL时，服务器通过正则...
06-Vue全家桶-项目实战1
08-03
在本篇“06-Vue全家桶-项目实战1”中，我们将探讨一个基于Vue技术栈的电商后台管理系统。这个项目涵盖了前端和后端的多个关键模块，旨在提供全面的电商管理功能。 1. **项目概述**： - 电商系统通常支持PC、移动...
尚硅谷_Vue全家桶,尚硅谷vue全家桶word文档
09-10
尚硅谷提供的"Vue全家桶"教程涵盖了Vue的核心概念、组件化开发、路由、状态管理等多个方面，旨在帮助开发者全面掌握Vue.js技术栈。在这个压缩包中，包含了一个名为"尚硅谷_Vue全家桶.pdf"的文件，它很可能是详细的...
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
"尚硅谷_Vue全家桶.docx"可能是一份详细的教学文档，涵盖了Vue.js的基础知识，如模板语法、组件、指令、计算属性和侦听器，以及更高级的主题，如Vuex的状态管理、Vue Router的路由配置和Vue CLI的使用。这份文档可能...
配置好的vue全家桶
03-27
"Vue全家桶"是社区常用的一个术语，指的是Vue.js与其他配套库和工具的集合，这些工具共同构成了一套完整的前端开发解决方案。在这个配置好的“Vue全家桶”中，包含了以下几个关键组件： 1. **Vue Router**：这是Vue...
浅析vue-router实现原理及两种模式
11-21
之前用Vue开发单页应用，发现不管路由怎么变化，浏览器地址栏总是会有一个’#’号。 当时检查自己的代码，没有发现请求的地址带’#’，当时也很纳闷，但是由于没有影响页面的渲染以及向后台发送请求，当时也没有在意。最近看了一下vue-router的实现原理，才逐渐揭开了这个谜题。 vue-router 的两种方式（浏览器环境下） 1. Hash （对应HashHistory） hash（“#”）符号的本来作用是加在URL中指示网页中的位置： http://www.example.com/index.html#print #符号本身以及它后面的字符称之为hash(也就是我之前为什么地址栏都
js实现轻量级前端路由框架
08-28
其用少量的代码，实现了web项目的单页面实现框架，通过此框架可以实现前端路由功能。此框架适合做单页面程序。简单、实用、可拓展
vue-Router实现原理
田兴的博客
10-27 6098
一、前端路由概念 通过改变 URL，在不重新请求页面的情况下，更新页面视图。 二、vue-Router两种模式 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： Hash — 默认值，利用 URL 中的hash("#") 、 history-- 利用URL中的路径（/home） 如何设置路由模式 const router=new VueRouter({ mode:'history', routes:[...] }) m
【vue回顾系列】20-大白话讲解vue-router路由实现的基本原理，保证让你绝对能懂！
庞囧的博客
03-28 1018
文章相较于之前做了删减，将稍微深入一点的知识点（例如源码，拓展）和一些表述比较乱的地方剔除，目的是为了能够用最小精力去记住，并且输出。在过去的前后端未分离时代，页面的每次跳转都是请求对应的html文件到浏览器进行渲染，页面才能展示。而现在前后端分离时代，客户端一次性加载大部分的前端文件，url变化时，不用向后台请求新的html文件，只需要将当前页面内的html内容进行更换，渲染，就可以实现页面内容的切换。这就是单页面，简称SPA。
前端实现路由的两种方式
yzyxzz的博客
11-09 4378
前端实现路由的方式主要有两种：hash模式和history模式、前端路由的本质为url改变页面不刷新、达到视图数据改变的结果。 1.hash模式： window对象的location属性值里的 hash属性可以拿到hash值：window.location.hash。 window对象的全局方法hashchange()可以监听到hash值得变化。 主要基于这个原理来实现hash模式的前端路由。 实例代码1： <body> <li><a href="#/home"
前端路由工作原理与使用
CRMEB小程序商城的博客
05-19 4512
单页应用和多页应用 单页面应用：所有功能在一个页面上实现 一个.html 文件 前端路由 组件化开发 网易云音乐 小米移动端 多页应用：与单页应用相对应的，不同的功能通过不同的页面来实现 单页面 - 多页面对比 路由 vue 路由官网 路由理解的概念 路由：就是一一对应关系的集合。 前端路由（单页应用程序）： 一个 url 地址，对应哪个组件 后端路由：一个接口地址，对应哪一段接口地址 前端路由 后端路由 前端路由工作原理 前端路由的本质，对 url 的 hash 值进行改变和监听，切换对应页面组件的
vue路由实现原理
lishuaihao的博客
03-13 2529
答：前端路由实现原理主要通过以下两种技术实现的 第一种：利用H5的history API实现 主要通过history.pushState 和 history.replaceState来实现，不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录[发布项目时,需要配置下apache] 第二种：利用url的hash实现 我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，路由里的 # 不叫锚点，我们称之为 hash，我们说的就是hash,
vue路由原理
weixin_39547000的博客
08-31 1212
前端路由切换原理：本质就是监听url的变化，然后匹配路由规则，显示相应的页面，并且不刷新页面。目前单页面应用实现路由的方式只有俩种：hash模式history模式hash模式相当于瞄点跳转。监听url#后面的传值发生变化，从而触发window.hashchange方法。并根据值修改暂时页面的内容。不会刷新页面history模式相对hash模式更加符合我们常见的url格式。原理是触发了原生的window.history方法。简单介绍一下window.history都有哪些方法。...
尚硅谷vue全家桶word
11-14
尚硅谷vue全家桶是一个web开发技术栈，集成了Vue.js框架、Vue Router、Vuex、Axios等主流的前端开发工具和库。Vue.js是一个轻量级、高效的JavaScript框架，适合构建单页面和动态网页应用。Vue Router是官方提供的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值