Vue.js第二天学习笔记（vue-router）

Vue-router 是 Vue.js 官方的路由插件，它和 Vue.js 的核心深度集成，可以非常方便地进行 Web 应用程序的路由控制管理。在学习 Vue.js 前端开发过程中，理解和掌握 Vue-router 的使用是非常重要的。

安装与引用

安装 Vue-router 可以使用 npm 或者引用 CDN 地址方式，这里以 npm 安装为例：

npm install vue-router

在 Vue 项目入口 js 文件中引用并在 Vue 实例中注册：

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

Vue.use(VueRouter)

基本用法

Vue-router 的基本用法非常简单，只需要定义路由组件和路由规则即可。假设我们定义了一个组件 Home：

<template>
  <div>
    <h1>Home Component</h1>
  </div>
</template>

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

定义路由规则：

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

然后在 Vue 实例中注册：

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

以上代码就完成了最简单的路由配置，这个例子中定义了一个路由规则，在路径为 '/' 时加载组件 Home。

嵌套路由

在实际项目中，我们可能需要使用嵌套路由来更好地组织我们的应用程序，这时可以使用 Vue-router 提供的嵌套路由功能。嵌套路由和路由的基本定义相似，只是在定义子路由时需要在父路由中添加相应的配置。

假设有一个父路由组件 About，还有两个子路由组件 Profile 和 Contact：

<template>
  <div>
    <h1>About Component</h1>
    <router-view></router-view>
  </div>
</template>

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

<template>
  <div>
    <h1>Profile Component</h1>
  </div>
</template>

<script>
export default {
  name: 'Profile',
}
</script>

<template>
  <div>
    <h1>Contact Component</h1>
  </div>
</template>

<script>
export default {
  name: 'Contact',
}
</script>

定义路由规则：

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

在其中定义子路由时，需要在父路由中加 children 字段，然后将子路由依次列出。访问路由 /about/profile 或 /about/contact 时，应用程序就会根据路由规则加载相应的组件。

动态路由

Vue-router 还提供了动态路由的功能，即通过参数动态构建路由规则，例如列表页到详情页的路由跳转。

假设有一个 Product 组件：

<template>
  <div>
    <h1>Product Component</h1>
    <p>id: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'Product',
  computed: {
    productId() {
      return this.$route.params.id
    },
  },
}
</script>

定义路由规则：

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

在路由规则中，使用 :id 的方式定义动态参数，同时在 Product 组件中使用 $route.params.id 可以获取到动态传入的参数。访问路由 /product/123 时，应用程序就会加载 Product 组件，并传入 id 参数值为 123。

以上就是 Vue-router 的基本用法、嵌套路由和动态路由的简单示例，希望能够对大家在 Vue.js 前端开发中学习与实践有所帮助。