vue页面跳转怎么实现
vue页面跳转的实现方式
使用<router-link>
通过Vue Router提供的<router-link>组件实现声明式导航，适合模板中使用：
<router-link to="/home">跳转到首页</router-link>
<router-link :to="{ name: 'user', params: { id: 123 }}">用户页</router-link>编程式导航
通过this.$router实例方法在JavaScript中控制跳转：
// 路径跳转
this.$router.push('/home')
// 命名路由+参数
this.$router.push({ name: 'user', params: { id: 123 } })
// 带查询参数
this.$router.push({ path: '/search', query: { keyword: 'test' } })
// 替换当前路由(不记录历史)
this.$router.replace('/login')
// 前进/后退
this.$router.go(-1)路由传参方式
- params传参：需在路由配置中定义参数
// 路由配置 { path: '/user/:id', component: User } - query传参：URL显示为
/path?key=value格式 - props传参：通过路由配置的
props属性传递
路由配置示例
需先在router/index.js中定义路由：
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/user/:id', name: 'user', component: User }
]动态路由匹配
使用冒号:标记动态路径参数：
// 匹配 /user/foo 或 /user/bar
{ path: '/user/:username', component: User }导航守卫
可在路由跳转前后添加逻辑控制：
router.beforeEach((to, from, next) => {
// 验证登录状态等逻辑
next()
})注意事项
- 使用
params时需配合name而非path - 查询参数
query会显示在URL中，params则不会（除非动态路由） - 路由跳转后可通过
this.$route访问当前路由信息
