vue.js 的路由

Vue.js 是一个用于构建用户界面的渐进式框架，它允许开发者使用组件来构建复杂的 web 应用程序。在 Vue.js 中，路由是一种管理页面之间跳转和导航的机制。

Vue.js 提供了官方的路由库 Vue Router 来实现客户端的路由功能。使用 Vue Router，你可以定义不同的路由，并将每个路由指向对应的组件。当用户进行页面跳转时，Vue Router 将根据配置的路由规则来加载对应的组件，从而实现页面的切换。

要使用 Vue Router，首先需要安装它：

复制代码

npm install vue-router

然后在你的 Vue.js 项目中引入并使用它：

javascript复制代码

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

// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'

// 使用 VueRouter 插件
Vue.use(VueRouter)

// 定义路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 在根组件中挂载路由实例
new Vue({
  router
}).$mount('#app')

上述代码创建了两个路由规则，分别对应根路径（'/'）和 '/about' 路径。当用户访问不同路径时，将会加载对应的组件。

在模板中使用路由是非常简单的，只需要使用 <router-link> 组件来生成链接，和 <router-view> 组件来显示当前路由对应的组件：

复制代码

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

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

这样，当用户点击不同链接时，页面将会进行相应的路由跳转，并加载对应的组件。

动态路由匹配

Vue Router 提供了动态路由匹配的功能，允许你在路由定义中使用动态参数。这样可以实现根据不同的参数值加载不同的组件或页面。

动态路由匹配可以通过在路由定义中使用冒号（:）来指定参数。例如：

javascript复制代码

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

上述代码中，/user/:id 定义了一个路由，并指定了 id 参数。当用户访问类似 /user/123 的路径时，会将 123 作为参数传递给 User 组件。

在组件中，可以通过 $route.params 来获取路由参数。例如，在 User 组件中可以这样获取 id 参数：

javascript复制代码

export default {
  mounted() {
    const id = this.$route.params.id
    // 使用 id 参数进行相应的操作
  }
}

如果需要监听路由参数的变化，可以使用 $route 对象提供的 beforeRouteUpdate 导航守卫：

javascript复制代码

export default {
  beforeRouteUpdate(to, from, next) {
    // 路由参数发生变化时的处理逻辑
    // 可以通过 to.params 获取新的参数值
    next()
  }
}

除了动态路由参数，还可以在路由定义中使用通配符（*）来匹配多个路径段。例如：

javascript复制代码

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

上述代码中，/user/* 匹配所有以 /user/ 开头的路径，不论之后跟着什么内容，都会加载 User 组件。

动态路由匹配是 Vue Router 提供的强大功能之一，可以帮助你根据不同的参数值灵活地处理和展示页面。详细的使用方法可以参考 Vue Router 的官方文档。

嵌套路由

Vue Router 还提供了嵌套路由的功能，允许你在组件中嵌套子路由。这样可以实现更复杂的页面结构和导航逻辑。

要使用嵌套路由，首先需要在父级路由中定义一个占位符来承载子路由的内容。例如：

javascript复制代码

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        { path: 'child', component: Child }
      ]
    }
  ]
})

上述代码中，/parent 是父级路由，Parent 组件是父级路由对应的组件。在父级路由中，通过 children 属性定义了一个子路由。

在父级组件的模板中，使用 <router-view> 占位符来显示子路由的内容：

复制代码

<template>
  <div>
    <h2>Parent Component</h2>
    <router-view></router-view>
  </div>
</template>

当用户访问 /parent 路径时，将会加载 Parent 组件，并且 Child 组件将会显示在父级组件的 <router-view> 中。

如果要在子路由中嵌套更多的子路由，只需要继续在父级路由的 children 数组中添加配置即可。例如：

javascript复制代码

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        { path: 'child', component: Child },
        {
          path: 'grandchild',
          component: GrandChild,
          children: [
            { path: 'greatgrandchild', component: GreatGrandChild }
          ]
        }
      ]
    }
  ]
})

上述代码中，/parent/grandchild/greatgrandchild 是一个嵌套了两层的路由路径。当用户访问该路径时，将会加载 Parent、GrandChild 和 GreatGrandChild 组件，并且它们会按照嵌套关系显示在父级组件的 <router-view> 中。

通过使用嵌套路由，可以构建出更复杂的页面结构和导航逻辑，并且使代码更加模块化和可维护。详细的使用方法可以参考 Vue Router 的官方文档。

路由导航两种方式

在 Vue.js 中，可以使用 <router-link> 组件来实现标签导航，它会生成一个用于路由跳转的链接。

<router-link> 组件是 Vue Router 提供的一个内置组件，它可以根据路由配置自动生成正确的链接，并处理路由切换。你可以将 <router-link> 放置在模板中任何需要导航的地方。

下面是一个示例，展示了如何使用 <router-link> 来创建标签导航：

复制代码

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>

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

上述代码中，我们在模板中添加了三个 <router-link> 组件，分别对应着三个不同的路由路径（'/'、'/about'、'/contact'）。当用户点击这些链接时，会触发相应的路由跳转，并加载对应的组件。

注意，在 <router-link> 组件中，通过 to 属性指定要跳转的路径。你可以将字符串路径直接赋值给 to 属性，也可以使用 JavaScript 表达式动态生成路径，例如：

复制代码

<router-link :to="'/user/' + userId">{{ username }}</router-link>

在上述代码中，我们使用了动态绑定的语法 :to，并且结合了 JavaScript 表达式，将 /user/ 和 userId 拼接成最终的跳转路径。

除了默认的链接，你还可以通过设置 <router-link> 的其他属性来实现更多的导航功能。一些常用的属性包括：

• exact: 精确匹配当前 URL，只有在 URL 完全匹配时才激活链接。
• active-class: 指定当前活动路由链接的 CSS 类名。
• tag: 指定生成的标签类型，默认为 <a>。

例如：

复制代码

<router-link to="/" exact active-class="active">Home</router-link>

上述代码中，我们使用了 exact 属性来精确匹配 '/' 路径，只有当 URL 完全匹配时才会激活链接，并且设置了 active-class 属性来指定活动链接的样式。

使用 <router-link> 组件可以方便地创建标签导航，并与 Vue Router 的路由功能无缝集成。详细的使用方法可以参考 Vue Router 的官方文档。

在 Vue Router 中，你可以为路由配置命名，以便在代码中更方便地引用和跳转。这被称为命名路由。

要为路由配置命名，可以在路由定义对象中使用 name 属性。例如：

javascript复制代码

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

上述代码中，我们为三个路由分别指定了名称：'home'、'about' 和 'contact'。

一旦为路由配置了名称，你就可以在代码中使用该名称来引用和跳转到对应的路由。例如，在组件中可以使用 $router.push() 方法来跳转到具有特定名称的路由：

javascript复制代码

export default {
  methods: {
    goToAbout() {
      this.$router.push({ name: 'about' })
    }
  }
}

在上述代码中，我们使用 $router.push() 方法并传入一个包含 name 属性的对象，来实现跳转到名称为 'about' 的路由。

除了 $router.push() 方法，还可以使用 $router.replace() 方法、<router-link> 组件等方式来进行命名路由的跳转。

命名路由在复杂的应用程序中非常有用，因为它允许你通过名称来管理和跳转路由，而不必直接使用路径。这样可以使代码更加清晰和可维护。详细的使用方法可以参考 Vue Router 的官方文档。