怎么获取vue路由历史栈记录
时间: 2023-04-04 15:04:20 浏览: 502
您可以使用Vue Router提供的$router.history对象来获取Vue路由历史栈记录。您可以使用$router.history.current属性来获取当前路由记录,使用$router.history.go(-1)方法来返回上一个路由记录,使用$router.history.go(1)方法来前进到下一个路由记录。如果您需要获取完整的路由历史记录,您可以使用$router.history.stack属性。
相关问题
vue-router 路由模式有哪些,实现方式及原理
vue-router的路由模式有三种:哈希模式(hash mode)、历史模式(history mode)和抽象模式(abstract mode)。
1. 哈希模式:默认使用的路由模式,通过改变URL中的hash值来进行路由的切换。例如:http://example.com/#/home。
实现方式:通过监听URL中hash值变化的事件,当hash值改变时,动态渲染相应的组件内容。
原理:浏览器会将hash值的变化当作页面的锚点变化来处理,不会重新发送请求,而是通过监听hashchange事件来更新URL对应的视图。
2. 历史模式:通过修改URL的路径来进行路由的切换,去除URL中的hash值。例如:http://example.com/home。
实现方式:通过HTML5的history API(pushState和replaceState方法)来修改URL路径并将路由信息保存在浏览器的history栈中。同时需要配合服务器端的配置,将所有的URL请求都指向根页面。
原理:history API可以修改URL路径并保持在浏览器的历史记录中,当URL发生改变时,浏览器会发送请求到服务器,服务器通过配置将所有的URL请求都指向根页面,然后由vue-router解析路由信息并呈现对应的视图。
3. 抽象模式:不依赖于浏览器的URL,可以将路由信息保存在任意位置,并通过切换路由信息来改变页面内容。
实现方式:通过自定义路由器(Router)和路由(Route)对象来管理路由状态,并通过编程方式来切换路由信息。
原理:抽象模式不依赖于浏览器的URL,可以将路由信息保存在任意位置,例如内存或者状态管理库中。通过切换路由信息,可以触发相应的组件渲染。
vue $router
`$router` 是 Vue.js 中的一个全局对象,它是 Vue Router 的实例,用于进行页面路由的控制。在使用 Vue Router 进行页面路由时,你可以通过 `$router` 对象来进行路由的跳转、传递参数等操作。以下是一些常见的 `$router` 方法:
- `push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler)`: 跳转到一个新的页面,会向浏览器的历史栈中添加一个新的记录。
- `replace(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler)`: 跳转到一个新的页面,但不会向浏览器的历史栈中添加一个新的记录,而是替换当前页面的记录。
- `go(n: number)`: 在历史栈中向前或向后跳转 n 步。
除了以上方法之外,`$router` 还有一些其它的属性和方法,例如:
- `$router.currentRoute`: 当前激活的路由信息。
- `$router.beforeEach`: 全局前置守卫,用于在跳转之前对路由进行拦截处理。
总之,`$router` 对象是 Vue Router 的核心对象,使用它可以方便地进行页面路由的控制。