Vue.js路由必备知识点：轻松掌握单页应用路由管理

Vue.js 路由简介

Vue.js 路由是一种用于构建单页应用（SPA）的工具。它允许您在应用程序中定义路由，并在用户导航到不同页面时动态加载和呈现组件。

路由传参

在 Vue.js 路由中，您可以通过 query 和 params 两种方式在路由之间传递参数。

1.1.1 query

query 参数是通过 URL 查询字符串传递的。它们通常用于传递简单的数据，例如页面大小或搜索查询。

1.1.2 示例

<!-- xxx.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>Name: {{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: this.$route.query.name
    }
  }
}
</script>

<!-- about.vue -->
<template>
  <router-link to="/about?name=John">About John</router-link>
</template>

当用户点击 About John 链接时，name 参数的值为 "John"。

1.2.1 params

params 参数是通过路由路径传递的。它们通常用于传递更复杂的数据，例如对象或数组。

1.2.2 示例

<!-- xxx.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>User ID: {{ user.id }}</p>
    <p>Username: {{ user.username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: this.$route.params.user
    }
  }
}
</script>

<!-- router/index.js -->
const router = new VueRouter({
  routes: [
    {
      path: '/about/:user',
      component: About
    }
  ]
})

<!-- about.vue -->
<template>
  <router-link to="/about/1">About User 1</router-link>
</template>

当用户点击 About User 1 链接时，user 参数的值为 { id: 1, username: 'user1' }。

1.2.3 props

您还可以通过 props 属性在路由之间传递参数。props 属性是一个对象，它将被传递给组件作为属性。

1.2.4 示例

<!-- xxx.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>User ID: {{ user.id }}</p>
    <p>Username: {{ user.username }}</p>
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

<!-- router/index.js -->
const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      props: {
        user: {
          id: 1,
          username: 'user1'
        }
      }
    }
  ]
})

当用户导航到 /about 路由时，user 属性的值为 { id: 1, username: 'user1' }。

嵌套路由

嵌套路由允许您在应用程序中创建父子路由。父路由负责呈现父组件，子路由负责呈现子组件。

示例

<!-- App.vue -->
<template>
  <div>
    <router-view />
  </div>
</template>

<script>
export default {
  router: new VueRouter({
    routes: [
      {
        path: '/',
        component: Home
      },
      {
        path: '/about',
        component: About,
        children: [
          {
            path: 'team',
            component: Team
          },
          {
            path: 'contact',
            component: Contact
          }
        ]
      }
    ]
  })
}
</script>

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h1>About</h1>
    <router-view />
  </div>
</template>

<!-- Team.vue -->
<template>
  <div>
    <h1>Team</h1>
  </div>
</template>

<!-- Contact.vue -->
<template>
  <div>
    <h1>Contact</h1>
  </div>
</template>

当用户导航到 /about 路由时，About 组件将被渲染。当用户导航到 /about/team 路由时，Team 组件将被渲染。当用户导航到 /about/contact 路由时，Contact 组件将被渲染。

动态路由

动态路由允许您根据某些条件动态生成路由。

示例

<!-- router/index.js -->
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

<!-- User.vue -->
<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

当用户导航到 /user/1 路由时，User 组件将被渲染，$route.params.id 的值为 "1"。

路由守卫

路由守卫允许您在用户导航到新路由之前或之后执行某些操作。

示例

<!-- router/index.js -->
const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        if (!isAuthenticated) {
          next('/login')
        } else {
          next()
        }
      }
    }
  ]
})

<!-- Admin.vue -->
<template>
  <div>
    <h1>Admin</h1>
  </div>
</template>

当用户导航到 /admin 路由时，beforeEnter 守卫将被执行。如果用户未认证，则他们将被重定向到 /login 路由。否则，他们将被允许访问 /admin 路由。

路由元信息

路由元信息允许您将任意数据附加到路由。这对于存储诸如页面标题或面包屑之类的信息非常有用。

示例

<!-- router/index.js -->
const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      meta: {
        title: 'About Us',
        breadcrumb: ['Home', 'About']
      }
    }
  ]
})

<!-- About.vue -->
<template>
  <div>
    <h1>{{ $route.meta.title }}</h1>
    <ol>
      <li v-for="crumb in $route.meta.breadcrumb">
        {{ crumb }}
      </li>
    </ol>
  </div>
</template>

当用户导航到 /about 路由时，About 组件将被渲染。$route.meta.title 的值为 "About Us"，$route.meta.breadcrumb 的值为 ['Home', 'About']。