Vuejs学习之旅——第六日：实现页面导航效果

Vue.js 路由与导航：构建单页应用的指南

路由：单页应用的关键

单页应用 (SPA) 允许用户在不重新加载页面的情况下在页面之间切换，从而提供更流畅和现代化的用户体验。Vue.js 中的路由机制正是实现了这种能力的核心。

配置路由

要使用 Vue Router 管理路由，只需安装它并将其配置在 main.js 文件中。您可以定义路由，指定路径和要显示的组件。以下是一个示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  router
}).$mount('#app')

添加导航栏

为了让用户轻松切换页面，您需要添加一个导航栏，其中包含指向不同路由的链接。Vue.js 的 <router-link> 组件非常适合此目的：

<nav>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
</nav>

实现导航高亮

通过为当前激活的路由链接应用 router-link-active 类，您可以实现导航栏中的高亮效果：

.router-link-active {
  background-color: #f00;
  color: #fff;
}

路由重定向

有时您需要将用户从一个路由重定向到另一个路由。例如，当用户访问不存在的页面时，您可以将其重定向到 404 页面：

const router = new VueRouter({
  routes: [
    { path: '/404', component: NotFound },
    { path: '*', redirect: '/404' }
  ]
})

路由传参

将数据从一个页面传递到另一个页面很有用。使用 this.$router.push() 和 this.$route.params，您可以轻松地将数据作为参数传递：

// 传递产品 ID
this.$router.push({ name: 'product', params: { id: product.id } })

// 获取产品 ID
this.$route.params.id

Vue 组件：代码重用

Vue 组件是可重用的代码块，允许您分解应用程序并提高其可维护性。您可以通过 Vue.component() 定义组件，然后在模板中使用它们：

// 定义组件
Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
})

// 使用组件
<my-component></my-component>

路由守卫：控制路由

路由守卫可以让您在路由切换时执行操作。例如，您可以检查用户是否已登录或提示用户保存更改：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!this.$store.getters.isLoggedIn) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

Vuex：状态管理

Vuex 是一个状态管理库，有助于管理复杂应用程序中的共享状态：

// store.js 中的 store 定义
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

// 组件中使用 store
this.$store.state.count // 获取 count
this.$store.commit('increment') // 递增 count

Vue 钩子函数：生命周期

Vue 钩子函数允许您在组件生命周期中执行特定操作：

export default {
  data () {
    return {
      count: 0
    }
  },
  created () {
    console.log('组件已创建')
  },
  mounted () {
    console.log('组件已挂载')
  },
  beforeDestroy () {
    console.log('组件即将销毁')
  }
}

结论

利用 Vue.js 的路由和导航功能，您可以构建现代化且响应迅速的单页应用。通过使用组件、路由守卫和 Vuex 等高级功能，您可以创建可扩展且易于维护的应用程序。

常见问题解答

• 什么是单页应用？ 单页应用是在不重新加载整个页面的情况下在页面之间切换的 Web 应用程序。
• 为什么需要路由？ 路由允许您通过 URL 控制页面切换，无需重新加载页面。
• 如何添加导航栏？ 使用 <router-link> 组件添加导航栏，它会自动更新为当前激活的路由。
• 如何传递数据？ 使用 this.$router.push() 传递数据作为路由参数，并在目标组件中使用 this.$route.params 访问它们。
• 什么是 Vue 组件？ Vue 组件是可重用的代码块，可让您分解应用程序并提高其可维护性。