轻松搞定vue路由

本文深入浅出地介绍了Vue路由的基本概念及其安装过程,并详细解析了路由的运作原理、内置组件的功能及路由配置的方法。

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

一、前言

        说到vue路由,先讲一下SPA的概念,Single Page Application单页面应用,即一个网站的所有页面都集中在一个html内,通过切换div模拟页面的切换,优点显然易见:实现资源共享,前后端分离,页面切换丝滑流畅。缺点就一个,对搜索引擎不太友好,这一点目前在技术上也正在弥补,优点是越来越突出。

        Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转。在这里理解三个词的区别:

        route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由;

        routes:它是个复数,表示多个的集合才能为复数;即我们可以理解为多个路由的集合,JS中表示多种不同状态的集合的形式只有数组和对象两种,事实上官方定义routes是一个数组;所以我们记住了,routes表示多个数组的集合;

        router:译为路由器,上面都是路由,这个是路由器,我们可以理解为一个容器包含上述两个或者说它是一个管理者,负责管理上述两个;举个常见的场景的例子:当用户在页面上点击按钮的时候,这个时候router就会去routes中去查找route,就是说路由器会去路由集合中找对应的路由。

        了解了vue路由是干什么的,接下来看看怎么安装。

二、vue-router安装

        路由分两种:

        hash路由:锚点(hash)变化不会刷新页面,常用事件 window.onhashchange;

        历史记录路由:属于H5新增特性,常用history.onpopstate。

        本文重点讲解hash路由。直接上图给安装教程。

3.X刚出不久,主流还是2.x

新手建议选择n,多练练,等熟悉了再保存预设。

        以上创建了一个myroute项目,在HBuilder中打开如下图:

 三、运作原理

1、内置组件

        打开src目录下的App.vue

        router-link 改变地址栏,改变hash值,页面会进行切换;

        router-view 存放要切换的页面

2、运作原理

        可用一幅图展示一下

注意,图中的index.js是在router目录下,属于路由配置的内容。

三、路由配置

1、普通配置

        通常是主页面导航栏使用

2、路由传参

        一般用来解决同一内容多页面问题,如电商网站中的产品

3、子路由配置

        解决非主页面的导航实现问题

 

        经过以上几点,可以实现搭建简单的网页 ,搞清楚之后,就可以进行深一步的学习了。

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值