Vue.js 路由

Vue.js 是一款流行的JavaScript前端框架，它提供了一些方便的功能，例如组件化、数据绑定和路由。

路由是一个非常重要的组成部分，它允许您使用URL来管理不同的页面，而无需重新加载整个页面。在本教程中，我们将介绍在Vue.js中如何使用路由。

安装

首先，我们需要安装Vue.js和Vue路由。您可以使用npm或yarn来安装这些库。请在命令行窗口中键入以下命令：

npm install --save vue vue-router
# 或者用yarn
yarn add vue vue-router

创建路由

现在，让我们在Vue.js应用程序中创建一个路由。我们需要在导入Vue和Vue路由之后创建一个Vue Router实例，并将其添加到Vue实例中。

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, // 将路由添加到Vue实例中
  render: h => h(App)
}).$mount('#app')

在路由实例中，我们定义了两个路由对象，每个路由对象都有一个路径和一个组件。在这个例子中，'/'路径将匹配'Home'组件，'/about'路径将匹配'About'组件。

路由的使用

现在，我们已经创建了路由，让我们查看如何在Vue.js中使用路由。

路由链接

在Vue.js中，您可以使用特殊的组件来导航到不同的页面。 组件以to prop作为它的属性，可以被设置为一个字符串路径或是一个描述目标路由的 JavaScript 对象。在HTML代码中，可以使用以下方式使用：

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

路由视图

组件是显示匹配的组件内容的容器，可以在应用程序的模板中使用它。

<router-view></router-view>

编程式导航

您还可以使用Vue Router提供的编程式导航。以下是两种编程式导航的方式：

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

// 对象
router.push({ path: '/about' })

动态路由

有时，您可能需要根据不同的参数显示不同的组件，这就是动态路由的作用。

您可以使用如下方式定义动态路由：

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

在上述代码中，':id'是一个参数，您可以在组件中通过$route.params.id访问它。

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

总结

这篇教程介绍了Vue.js路由。我们学习了如何安装Vue.js和Vue路由，创建路由实例，导航到不同的页面以及使用动态路由。希望这篇教程对您有所帮助。