vue实现跳转的方式
vue-router 的基本跳转方式
使用 router-link 组件进行声明式导航
<router-link to="/home">Home</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>在脚本中使用编程式导航
this.$router.push('/home')
this.$router.push({ path: '/user/123' })
this.$router.push({ name: 'user', params: { userId: 123 } })路由传参的三种方式
路径参数传参（需在路由配置中定义）
// 路由配置
{ path: '/user/:id', component: User }
// 跳转方式
this.$router.push('/user/123')query 参数传参
this.$router.push({ path: '/user', query: { id: 123 } })props 传参（路由配置中启用）
// 路由配置
{ path: '/user/:id', component: User, props: true }
// 组件中接收
props: ['id']路由跳转的其他方法
替换当前路由（不记录历史）
this.$router.replace('/login')前进后退导航
this.$router.go(1) // 前进
this.$router.go(-1) // 后退命名路由和命名视图的使用
命名路由跳转
// 路由配置
{ path: '/user/:id', name: 'user', component: User }
// 跳转方式
this.$router.push({ name: 'user', params: { id: 123 } })命名视图配置（多组件布局）
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>导航守卫控制跳转
全局前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
// 需要登录验证
} else {
next()
}
})组件内守卫
beforeRouteEnter(to, from, next) {
// 组件实例尚未创建
next(vm => {
// 通过vm访问组件实例
})
}动态路由跳转
添加动态路由
router.addRoute({ path: '/new', component: NewComponent })跳转到动态路由
this.$router.push('/new')路由懒加载优化
使用动态导入实现懒加载
const User = () => import('./views/User.vue')路由配置中使用
{ path: '/user', component: User }
