vue标签实现跳转

vue-router 实现页面跳转

在 Vue 项目中通常使用 vue-router 进行路由跳转管理，以下是常见的实现方式：

声明式导航

<router-link to="/path">跳转文字</router-link>
<router-link :to="{ name: 'routeName' }">命名路由</router-link>
<router-link :to="{ path: '/path', query: { id: 1 } }">带查询参数</router-link>

编程式导航

// 基础跳转
this.$router.push('/path')

// 命名路由跳转
this.$router.push({ name: 'routeName' })

// 带参数跳转
this.$router.push({
  path: '/detail',
  query: { id: 123 }
})

// 替换当前路由(无历史记录)
this.$router.replace('/newPath')

// 前进后退
this.$router.go(1)

路由传参方式

query 传参

// 跳转时
this.$router.push({
  path: '/detail',
  query: {
    id: 123,
    name: 'test'
  }
})

// 接收参数
this.$route.query.id

params 传参

// 需要路由配置 name 属性
this.$router.push({
  name: 'detail',
  params: {
    id: 123
  }
})

// 接收参数
this.$route.params.id

动态路由匹配

路由配置：

{
  path: '/user/:id',
  component: User
}

组件中获取：

this.$route.params.id

路由配置示例

基本路由配置：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  }
]

导航守卫

全局前置守卫：

router.beforeEach((to, from, next) => {
  // 跳转前逻辑
  next()
})

组件内守卫：

beforeRouteEnter(to, from, next) {
  // 不能获取组件实例 this
  next(vm => {
    // 通过 vm 访问组件实例
  })
}