Vue.js第二天学习笔记(vue-router)

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,还有两个子路由组件 ProfileContact

<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 前端开发中学习与实践有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue.js第二天学习笔记(vue-router) - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • vue.js实现日历插件使用方法详解

    下面我将为您详细讲解“vue.js实现日历插件使用方法详解”的完整攻略,过程中包含两条示例说明。 一、准备工作 首先,在安装vue.js的前提下,我们需要下载日历的核心代码库moment.js和日期相关的处理库date-fns,可以通过npm进行安装: npm install moment date-fns –save 接着,在Vue组件中,我们需要导入这…

    Vue 2023年5月29日
    00
  • 关于VueSSR的一些理解和详细配置

    关于VueSSR的一些理解和详细配置 VueSSR简介 Vue Server-Side Rendering(Vue SSR)是为了解决客户端渲染(CSR)中的SEO(Search Engine Optimization)问题而出现的。Vue SSR使用Node.js的服务器渲染Vue组件,在服务器端将Vue组件渲染成HTML并将其发送给客户端。在客户端接收到…

    Vue 2023年5月28日
    00
  • 原生JS改变透明度实现轮播效果

    好的!原生JS改变透明度实现轮播效果的攻略如下: 一、准备工作 在HTML文件中创建一个包含图片的轮播容器,如下所示: <div class="slider"> <img src="./image1.jpg" alt="image1"> <img src=".…

    Vue 2023年5月28日
    00
  • 浅谈vue的第一个commit分析

    下面我来详细讲解”浅谈vue的第一个commit分析”的完整攻略。 1. 了解Vue.js的号召与目标 Vue.js起源于2013年,是由一名华人开发者尤雨溪(Evan You)所创建的。他旨在创造一款简单、灵活的 JavaScript 框架用于构建用户界面。Vue.js也称为渐进式JavaScript框架,具有轻量级、易上手、高效渲染等特点。Vue.js近…

    Vue 2023年5月27日
    00
  • 详解vue.js移动端配置flexible.js及注意事项

    详解vue.js移动端配置flexible.js及注意事项 介绍 随着移动端市场的扩大,越来越多的网站和应用开始关注移动端的适配问题。Vue.js作为一种前端开发的流行框架,也需要考虑移动端适配问题。本文将介绍如何在Vue.js中配置flexible.js实现移动端适配,以及在使用过程中需要注意的细节。 flexible.js介绍 flexible.js是淘…

    Vue 2023年5月28日
    00
  • 使用vue导出excel遇到的坑及解决

    当使用Vue来处理数据并导出Excel时,可能会遇到一些问题。以下是关于“使用Vue导出Excel遇到的坑及解决”的完整攻略,其中包含了解决这些问题的步骤和两个示例。 问题和解决方案 问题1:表格的样式丢失 当将数据导出到Excel时,原本应用的样式可能不会保留。这可能是因为Excel的格式化与HTML和CSS不同。 解决方案 可以使用 xlsx-style…

    Vue 2023年5月27日
    00
  • vue相关配置文件详解及多环境配置详细步骤

    Vue相关配置文件详解及多环境配置详细步骤 在Vue项目的开发过程中,相关配置文件有着非常重要的作用,在不同的环境下,我们需要对这些配置文件进行不同的设置,在这篇攻略中,我们将详细讲解如何对Vue项目进行多环境配置。 环境变量文件 在Vue项目中,我们可以通过设置环境变量来实现多环境配置,在每个环境,你可以通过设置不同的环境变量来达到不同的配置。 创建环境变…

    Vue 2023年5月27日
    00
  • vue计时器的实现方法

    下面是关于vue计时器实现方法的详细攻略。 1. 前置知识 Vue.js框架基础知识 Vue.js生命周期钩子函数 Vue.js计算属性 2. 实现方法 2.1 通过setInterval实现 我们可以通过JavaScript自带的setInterval函数来实现一个简单的计时器。对于Vue.js来说,我们可以在组件中使用created生命周期函数来创建一个…

    Vue 2023年5月29日
    00
合作推广
合作推广
分享本页
返回顶部