Vue.js 路由

在 Vue.js 中，路由是一种管理应用程序不同页面之间导航的方式。Vue.js 提供了 Vue Router 插件来帮助我们实现路由功能。通过 Vue Router，我们可以定义不同的路由，然后根据用户的操作来切换到不同的页面。

安装 Vue Router

要使用 Vue Router，首先需要安装它。你可以通过 npm 或者 yarn 来安装 Vue Router：

npm install vue-router

或者

yarn add vue-router

配置路由

在 Vue.js 应用中，我们需要创建一个 router 实例，并定义路由。在主文件（通常是 main.js）中，我们可以按照以下步骤配置路由：

1. 导入 Vue 和 Vue Router：

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

1. 使用 Vue Router 插件：

Vue.use(VueRouter)

1. 定义路由：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

在上面的示例中，我们定义了两个路由，分别是根路由和关于页面的路由。

1. 创建 router 实例：

const router = new VueRouter({
  routes
})

1. 将 router 实例注入到 Vue 实例中：

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

使用路由

在 Vue 组件中，我们可以使用 <router-link> 组件来创建导航链接，使用 <router-view> 组件来显示当前路由对应的组件。

// www.javascriptcn.com code example
<template>
  <div>
    <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>

在上面的示例中，我们使用 <router-link> 创建了两个链接，分别指向根路由和关于页面的路由。使用 <router-view> 来显示当前路由对应的组件。

动态路由

除了定义静态路由外，我们还可以定义动态路由。动态路由可以根据不同的参数来显示不同的内容。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
]

在上面的示例中，我们定义了一个动态路由 /user/:id，其中 :id 是动态的参数，可以根据不同的值来显示不同的用户信息。

导航守卫

Vue Router 还提供了导航守卫的功能，可以在路由跳转前后执行一些操作，比如权限验证、页面加载等。

// www.javascriptcn.com code example
router.beforeEach((to, from, next) => {
  // 在路由跳转前执行操作
  // 比如权限验证
  
  next()
})

router.afterEach((to, from) => {
  // 在路由跳转后执行操作
  // 比如页面加载
})

在上面的示例中，我们使用 beforeEach 方法来定义在路由跳转前执行的操作，使用 afterEach 方法来定义在路由跳转后执行的操作。

这就是关于 Vue.js 路由的介绍，希望能帮助你更好地理解和应用 Vue.js 中的路由功能。