vue push 键值是动态的_Vue-Router 使用和原理简单实现

最新推荐文章于 2023-11-02 00:31:28 发布

隆儿哥哥丶

最新推荐文章于 2023-11-02 00:31:28 发布

阅读量782

点赞数

文章标签： vue push 键值是动态的

本文链接：https://blog.csdn.net/weixin_42524792/article/details/113323472

版权

Vue Router 是 Vue.js 官方的路由管理器,可以让构建单页面应用变得易如反掌

单页面应用(Single Page Application,SPA)

应用只有一个完整的页面，它在加载页面时，不会加载全部页面，只加载一个首页的容器，其它页面的内容在首页容器某个位置，需要页面切换时只更新某个指定的容器中内容

单页面应用的核心之一是：更新视图而不重新请求页面

单页面应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容

但当url变化，都会造成页面的刷新，目前有两种方式实现：

一种方式是用hash实现路由
另一种方式是用history

Vue-Router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式

Vue-Router的使用

通过Vue-cli安装Vue项目时可以把Vue-Router一起安装到项目中，或者另外安装引入

Vue-Router 使用步骤

1、安装依赖

2、在Vue中使用注册路由组件

3、定义路由规则路由规则是一个数组

4、创建路由对象

5、在Vue实例创建时传入创建路由实例

new Vue 时传入的router是为了给Vue实例注入 router，router，router，route 这两个属性

$route 存储当前的路由规则信息，路径、参数等信息
$router 是提供一些操作路径的方法 push、replace、go 还能通过currentRoute拿到当前路由规则信息

6、在首页（主页面）使用显示路由组件，和使用显示跳转（不是必须，可以用编程式导航代替）

动态路由

在路由规则里 path后面跟上 :/参数名，就可以在url上传参数给路由对应的组件
还可以再路由规则中指定props: true，指定后url上面的参数会作为props传给组件

嵌套路由

当多个路由的组件都有相同的内容，可以将这些相同内容提取到公共的组件当中，在公共组件里面通过路由的方式（使用）显示不同的路由组件

编程式导航

除了用外，更多情况下是使用$router的方法来实现路由跳转

push 方法会记录本次历史
replace 方法不会记录本次历史会替换历史记录
go 方法会以0为基准跳转到相对页面
// 跳转会记录本次历史 this.router.push(′/′)this.router.push('/') this.router.push(′/′)this.router.push({ name: 'Home' }) this.router.push(name:′Detail′,params:id:2)//跳转不会记录本次历史this.router.push({ name: 'Detail', params: { id: 2 }}) // 跳转不会记录本次历史 this.router.push(name:′Detail′,params:id:2)//跳转不会记录本次历史this.router.replace('/login') // 按照当前历史进行跳转负数是回退正数是向前 this.$router.go(-2)

Hash模式和History模式区别

两种方式都是，当路径法发生变化，不会向服务器发送请求，使用js监视路径的变化根据不同的地址渲染不同的内容
Hash模式

url里面有#，#后面是路由地址
原理实现是基于锚点和 onhashchange事件

History模式

url里面没有#
原理实现是基于HTML5中History API
history.pushState()
history.replaceState()

History模式服务端支持

History需要服务器支持，因为History没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，把除了静态资源外所有路由都重定向到根页面
在node中，可以使用 connect-history-api-fallback 来重定向到根页面