详解 VueRouter 路由

VueRouter 是 Vue.js 的官方路由管理器，它可以将不同的 URL 地址映射到不同的组件，并且在组件之间进行快速切换和传递数据。在本文中，我们将详细讲解 VueRouter 的使用方法，包括安装、基本用法、动态路由、嵌套路由等内容。

安装

安装 VueRouter 非常简单，只需要在终端中运行以下命令：

npm install vue-router

基本用法

在使用 VueRouter 之前，我们需要先创建路由实例并将其挂载到 Vue 实例上。路由实例可以通过 new VueRouter() 来创建，然后通过 Vue.use() 来注册：

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

Vue.use(VueRouter)

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

new Vue({
  router,
  el: '#app'
})

代码中，我们首先在 Vue 实例中注册了 VueRouter，然后创建了一个路由实例，并在路由实例中定义了两个路由：/home 和 /about，分别对应两个组件。最后，我们将路由实例挂载到 Vue 实例中，并将其命名为 router。

接下来，我们将在组件中使用 router-link 和 router-view 来切换和显示组件。

在组件中，我们可以使用 router-link 组件来跳转到另一个路由：

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

在上面的代码中，我们使用了 to 属性来指定要跳转的路由。

要显示当前路由对应的组件，我们可以在组件中使用 router-view 组件：

<router-view></router-view>

这样就可以根据当前路由自动加载对应的组件了。

动态路由

有时候我们需要根据动态参数显示不同的页面，比如一个博客网站，根据博客的 ID 显示不同的文章。这时，我们可以使用动态路由来实现此功能。

在路由定义中，我们可以使用 : 符号来定义动态路由：

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

在组件中，我们可以通过 $route.params 来访问动态路由的参数：

export default {
  computed: {
    blogId () {
      return this.$route.params.id
    }
  }
}

在上面的代码中，我们通过 computed 计算属性来获取当前路由参数中的 id 并使用它来显示博客文章。

嵌套路由

有时候我们需要在一个页面中显示多个组件，每个组件又包含自己的子路由，这时候我们可以使用嵌套路由来实现此功能。

在路由定义中，我们可以使用 children 属性来定义子路由：

const router = new VueRouter({
  routes: [
    { path: '/user', component: User, children: [
      { path: 'profile', component: Profile },
      { path: 'settings', component: Settings }
    ] }
  ]
})

在上面的代码中，我们在 /user 路径上定义了一个父级组件 User，该组件包含两个子路由：/user/profile 和 /user/settings，对应两个子级组件。

在组件中，我们仍然可以使用 router-link 和 router-view 来切换和显示子路由。

<router-link to="/user/profile">Profile</router-link>
<router-link to="/user/settings">Settings</router-link>
<router-view></router-view>

这样就可以实现在一个页面中显示多个组件，并生成相应的子路由。

示例说明

示例1

假如我们现在有一个电商网站，需要实现以下功能：

• 在首页展示商品列表，并提供跳转到商品详情页的链接。
• 在商品详情页展示商品图片、价格、名称等信息，并提供增加购物车、立即购买等操作。

为了实现上述功能，我们可以使用 VueRouter 来处理路由。

首先，我们定义两个组件：Home 和 Product，分别用于展示商品列表和商品详情页。

import Home from './views/Home.vue'
import Product from './views/Product.vue'

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/product/:id', component: Product }
  ]
})

其中 / 路径对应 Home 组件，/product/:id 路径对应 Product 组件，:id 表示路由参数，用于跳转到不同的商品详情页。

然后，我们在 Product 组件中根据路由参数来显示对应的商品信息。

export default {
  data () {
    return {
      product: null
    }
  },
  created () {
    const productId = this.$route.params.id
    // 根据 productId 请求后端数据，获取商品信息
    api.getProduct(productId).then(product => {
      this.product = product
    })
  }
}

在这里，我们定义了一个空对象 product 用于存储商品信息，在组件创建时通过 $route.params.id 获取路由参数 id，然后去后端请求数据并将结果赋值给 product。

最后，在商品详情页中我们可以使用 router-link 来跳转到购物车或者立即购买页面。

<router-link to="/cart">Add to cart</router-link>
<router-link to="/checkout">Check out</router-link>

这样就实现了一个简单的商品展示和购买页面。

示例2

在第二个示例中，我们将使用嵌套路由来实现一个博客网站，在页面上展示博客列表和博客详情页，并使用动态路由来根据博客 ID 加载对应的文章。

首先，我们定义两个主要的组件：Blog 和 Post，分别用于显示博客列表和博客详情页。

import Blog from './views/Blog.vue'
import Post from './views/Post.vue'

const router = new VueRouter({
  routes: [
    { path: '/', component: Blog },
    { path: '/post/:id', component: Post, props: true, children: [
      { path: 'comments', component: Comments }
    ] }
  ]
})

其中 / 路径对应 Blog 组件，/post/:id 路径对应 Post 组件，:id 表示路由参数，用于加载不同的文章。此外，我们还定义了子路由 /post/:id/comments，用于加载评论列表。

然后，我们在 Post 组件中根据路由参数来动态加载对应的文章。

export default {
  props: ['id'],
  data () {
    return {
      post: null
    }
  },
  created () {
    // 根据 this.id 请求后端数据，获取文章信息
    api.getPost(this.id).then(post => {
      this.post = post
    })
  }
}

在这里，我们通过 props 属性将路由参数 id 传递给组件，并在组件创建时根据 id 请求数据。

最后，在 Post 组件中我们可以使用 router-link 来跳转到评论列表。

<router-link :to="{ path: '/post/' + id + '/comments' }">Comments</router-link>

这样就实现了一个简单的博客网站。

总结

VueRouter 是 Vue.js 的官方路由管理器，它可以将不同的 URL 地址映射到不同的组件，并且可以快速地切换和传递数据。在本文中，我们详细讲解了 VueRouter 的使用方法，包括安装、基本用法、动态路由、嵌套路由等内容，并且通过两个示例说明了如何在实际项目中使用 VueRouter。