vue cli实现跳转
vue cli实现页面跳转的方法
在Vue CLI项目中，页面跳转主要通过Vue Router实现。以下是几种常见的跳转方式：
使用<router-link>组件
<router-link to="/home">跳转到首页</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户页面</router-link>这种方式会在DOM中渲染为<a>标签，适合模板中的声明式导航。
编程式导航
// 基本跳转
this.$router.push('/home')
// 带参数跳转
this.$router.push({ path: '/user', query: { id: '123' } })
// 命名路由跳转
this.$router.push({ name: 'user', params: { userId: '123' } })
// 替换当前路由(无历史记录)
this.$router.replace('/login')
// 前进/后退
this.$router.go(1)
this.$router.go(-1)路由配置示例
// router/index.js
const routes = [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/user/:id',
name: 'user',
component: User
}
]动态路由匹配
// 获取路由参数
this.$route.params.id
this.$route.query.id导航守卫
router.beforeEach((to, from, next) => {
// 跳转前逻辑处理
next()
})这些方法覆盖了Vue CLI项目中大部分路由跳转需求，可以根据具体场景选择合适的方式。编程式导航适合在方法中触发跳转，而<router-link>适合模板中的链接式跳转。
