Vue Router 4

安装

yarn add vue-router@4

基本配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// main.js
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

createApp(App)
  .use(router)
  .mount('#app')

路由配置

动态路由

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

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id)
</script>

嵌套路由

{
  path: '/user/:id',
  component: User,
  children: [
    {
      path: '',
      component: UserHome
    },
    {
      path: 'profile',
      component: UserProfile
    },
    {
      path: 'posts',
      component: UserPosts
    }
  ]
}

命名路由

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

<router-link :to="{ name: 'user', params: { id: 123 }}">
  User
</router-link>

命名视图

{
  path: '/',
  components: {
    default: Home,
    sidebar: Sidebar,
    footer: Footer
  }
}

<router-view></router-view>
<router-view name="sidebar"></router-view>
<router-view name="footer"></router-view>

编程式导航

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 字符串路径
router.push('/users/eduardo')

// 带参数的对象
router.push({ path: '/users/eduardo' })

// 命名路由
router.push({ name: 'user', params: { id: 'eduardo' } })

// 带查询参数
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash
router.push({ path: '/about', hash: '#team' })

// 替换当前位置
router.replace({ path: '/home' })

// 前进/后退
router.go(1)
router.go(-1)
router.back()
router.forward()
</script>

路由守卫

全局前置守卫

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    return { name: 'Login' }
  }
})

全局后置钩子

router.afterEach((to, from) => {
  console.log('Navigation finished')
})

路由独享守卫

{
  path: '/users/:id',
  component: User,
  beforeEnter: (to, from) => {
    // 拒绝导航
    return false
  }
}

组件内守卫

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('确定要离开吗？')
  if (!answer) return false
})

onBeforeRouteUpdate(async (to, from) => {
  // 响应路由参数变化
})
</script>

路由元信息

{
  path: '/admin',
  component: Admin,
  meta: {
    requiresAuth: true,
    roles: ['admin']
  }
}

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth) {
    // 检查认证
  }
})

滚动行为

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

路由懒加载

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

Composition API

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 访问路由信息
console.log(route.params)
console.log(route.query)
console.log(route.meta)

// 导航
const goToUser = (id) => {
  router.push({ name: 'user', params: { id } })
}
</script>