首页vue路由跳转

vue路由跳转

时间: 2025-04-28 21:24:26 浏览: 19

### Vue.js 中实现路由跳转的方法在 Vue.js 应用程序中，`vue-router` 是用于管理应用内部不同视图之间的导航工具。要实现在页面间的跳转，主要依靠 `router.push()` 方法[^1]。 #### 使用 `router.push` 此方法允许应用程序执行导航动作，即改变当前显示的视图而无需重新加载整个网页。它接受一个目标位置作为参数，该位置可以是指定路径字符串、命名路由的对象或是带有查询参数或哈希值的位置描述符对象。 ```javascript // 字符串形式的目标地址 this.$router.push('/home') // 命名路由的形式 this.$router.push({ name: 'user', params: { id: 123 }}) // 含有查询参数的例子, 结果将是 /register?plan=private this.$router.push({ path: '/register', query: { plan: 'private' }}) ``` 当使用带参数的命名路由时，这些参数会被自动解析并注入到匹配组件实例中的 `$route.params` 对象里，以便于访问传递过来的数据[^3]。为了使上述代码正常工作，在项目初始化阶段需先引入并配置好 `vue-router` 插件，并设置好对应的路由规则[^2]： ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }); ``` 以上展示了基础的路由配置方式以及如何利用 `router.push` 来完成页面间的平滑过渡。

阅读全文