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 }