vue.js 提供了多种页面跳转方式：客户端路由 (vue router)：使用单页应用程序 (spa) 无缝导航，可以通过 this.$router.push() 或 this.$router.replace() 进行跳转。哈希路由：使用浏览器的哈希值表示页面状态，通过 组件进行跳转。编程方式跳转：使用 this.$router.go() 方法实现正向、反向跳转或跳转到特定索引的页面。window.location：使用原生 window.locatio
Vue.js 页面跳转
Vue.js 提供了多种方法在页面之间进行跳转：
1. 客户端路由
Vue Router 是一个流行的客户端路由库，它允许您使用单页应用程序 (SPA) 在页面之间无缝导航。
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install vue-router -
配置：在
main.js中配置路由器<code class="javascript">import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes })</code> - 跳转：使用
this.$router.push('/')或this.$router.replace('/')导航到指定路径。
2. 哈希路由
哈希路由使用浏览器的哈希值来表示页面状态，无需刷新页面。
-
配置：使用
Vue.js内置的router-link组件<code class="html"><router-link to="/about">关于</router-link></code>
- 跳转：点击
<router-link></router-link>组件即可导航到指定哈希值。
3. 编程方式跳转
可以使用 this.$router.go() 方法在页面之间进行编程方式跳转。
- 正向跳转：
this.$router.go(1)向前跳转一页。 - 反向跳转：
this.$router.go(-1)向后跳转一页。 - 跳转到特定索引：
this.$router.go(2)跳转到第三页。
4. window.location
您还可以使用原生 window.location 对象在页面之间跳转。
- 跳转：
window.location.href = '/about'直接跳转到指定 URL。
