Vue之路由(Vue Router)

🥑什么是Vue Router

Vue Router是Vue.js官方的路由管理库，它与Vue.js核心深度集成，提供了构建SPA所需的一切。通过使用Vue Router，我们可以实现页面的无刷新切换、嵌套视图、路由参数、导航守卫等功能，使得我们的应用更具交互性和用户友好性。

🥑安装和配置Vue Router

首先，我们需要确保已经安装了Vue.js。如果没有安装，可以通过以下命令安装：

npm install vue

接下来，我们需要安装Vue Router：

npm install vue-router

安装完成后，我们可以在项目的入口文件（通常是main.js）中配置Vue Router：

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  // 配置路由规则
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    // 更多路由规则...
  ]
})

new Vue({
  render: h => h(App),
  router  // 将router实例注入Vue实例
}).$mount('#app')

在上面的代码中，我们首先引入Vue和VueRouter，然后使用Vue.use()安装VueRouter。接着，我们创建了一个router实例，配置了一些基本的路由规则，并将这个实例注入到Vue实例中。

🥑基本的路由配置

🍄路由规则

在上面的例子中，我们定义了两个基本的路由规则，一个是根路径(/)对应的组件是Home，另一个是路径/about对应的组件是About。这些规则告诉Vue Router在不同的路径下应该渲染哪个组件。

🍄路由链接

要在应用中实现路由导航，我们可以使用<router-link>组件。例如，在一个导航栏中，我们可以这样使用：

<!-- App.vue -->

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

上面的代码中，<router-link>被用于创建路由链接，to属性指定了链接的目标路径。<router-view>则是用于显示当前路径对应的组件。

🥑路由参数

有时，我们需要在路由中传递参数。Vue Router允许我们通过在路由规则中使用冒号标记来实现这一点。

// main.js

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

在上述例子中，:id是一个动态的路由参数，它可以匹配任何非空字符串。我们可以在组件中通过$route.params.id来访问这个参数。

🥑嵌套路由

Vue Router还支持嵌套路由，这使得我们可以在应用中创建更为复杂的页面结构。

// main.js

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

上述例子中，UserProfile和UserPosts是User组件的子组件，它们分别对应于路径/user/:id/profile和/user/:id/posts。

🥑导航守卫

导航守卫允许我们在导航发生时执行一些逻辑。Vue Router提供了多个导航守卫，例如beforeEach、beforeResolve和afterEach等。我们可以使用这些导航守卫来进行权限验证、数据加载等操作。

// main.js

const router = new VueRouter({
  routes: [
    // 路由规则...
  ]
})

router.beforeEach((to, from, next) => {
  // 在导航发生前执行逻辑
  // 比如权限验证

  if (to.meta.requiresAuth) {
    // 需要验证权限
    if (checkAuth()) {
      next() // 允许导航
    } else {
      next('/login') // 重定向到登录页
    }
  } else {
    next() // 不需要验证权限，直接导航
  }
})

在上述例子中，beforeEach导航守卫用于进行权限验证。如果路由规则中包含meta.requiresAuth属性，并且用户未通过验证，我们将重定向到登录页。

🥑基本用法

🍄创建路由实例

在Vue项目中，首先需要创建一个路由实例。通常，我们会在src目录下创建一个router文件夹，并在其中创建一个index.js文件：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

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

export default router

🍄在主应用中使用路由

要在主应用中使用路由，需要在main.js中引入并使用路由实例：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

🍄创建视图组件

在src/views目录下创建Home.vue和About.vue作为两个示例视图组件。

<!-- Home.vue -->
<template>
  <div>
    <h2>Home Page</h2>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<!-- About.vue -->
<template>
  <div>
    <h2>About Page</h2>
    <p>Learn more about us!</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

🍄在模板中使用路由链接

在需要使用路由链接的地方，可以使用<router-link>标签：

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

🥑路由传参

有时，我们需要在路由间传递参数。Vue路由提供了多种方式来实现这一点，包括动态路由、查询参数等。以下是一个简单的动态路由示例：

// router/index.js
// 在路由配置中定义动态参数
{
  path: '/user/:id',
  component: () => import('@/views/User.vue')
}

<!-- User.vue -->
<template>
  <div>
    <h2>User Page</h2>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

在这个示例中，通过在路由配置中定义:id作为动态参数，我们可以在User.vue组件中通过$route.params.id来获取传递的参数。

🥑总结

Vue路由是构建现代单页面应用的重要工具之一。通过使用Vue路由，我们可以轻松地管理页面导航、传递参数，并创建更加灵活和交互性的用户界面。以上只是Vue路由的入门介绍，还有许多高级特性和用法等待你去探索和使用。希望这个简单的示例能够帮助你更好地理解和使用Vue路由。