vue-router 4使用实例详解

yizhihongxing

下面是“vue-router 4使用实例详解”的完整攻略。

一、前置知识:

  • Vue.js框架的基础使用,Vue组件、生命周期等基础知识。
  • Vue-Router的基础使用方法,可以参考Vue-Router官网
  • 对ES6的基础了解。

二、vue-router 4使用实例

1. 安装 vue-router

使用npm安装Vue Router:

npm install vue-router@next --save

2. 创建Vue Router实例

import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";

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

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

这里通过createRouter API 来创建Vue Router实例。

传递的参数说明:

  • history:用于指定路由模式,默认为 mode: 'hash'
  • routes:用于配置路由表,数组内每一项都会映射一个路由。

3. 在Vue应用中使用Vue Router

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

app.use(router);
app.mount("#app");

在使用Vue应用的地方,先创建Vue实例,然后通过 app.use()router实例传入到Vue实例中。

4. 定义路由

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

通过routes数组定义路由:

  • path:路由路径,例如 /about
  • component:对应的组件。

5. 使用<router-link>组件

<!-- 这里是 App.vue -->
<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<router-link>用于声明导航链接,当点击它时会自动调用Vue Router实例对象的push()方法导航到对应URL。

6. 使用<router-view>组件

<!-- 这里是 App.vue -->
<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<router-view>用于渲染当前路由的组件内容。

至此,一个简单的Vue Router实例就创建完成了。

7. 路由传参

<!-- 这里是 Home.vue -->
<template>
  <div>
    <h2>Home</h2>
    <div>{{ message }}</div>
    <!-- 通过props的方式传递参数 -->
    <router-link :to="{ name: 'about', params: { name: 'Jack' } }">
      Go to about page
    </router-link>
  </div>
</template>

<script>
export default {
  name: "Home",
  props: ["message"], // 通过props接收参数
};
</script>

在Home组件中,通过<router-link>把参数传递到about组件。

const routes = [
  {
    path: "/about/:name", // 在路径中定义参数name
    name: "about", // 这里必须定义name
    component: About,
  },
];

在路由表中,定义了路径带有参数name,可以通过props字段来接收参数并传递给About组件。

const About = {
  name: "About",
  props: ["name"], // 通过props接收参数
  template: `<div><h2>About {{ name }}</h2></div>`,
};

在组件中通过props接收参数。

以上就是Vue Router 4的使用实例,掌握这些知识可以非常简单地实现路由功能,可以应用于Vue.js开发的任何项目中。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue-router 4使用实例详解 - Python技术站

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

相关文章

  • vue项目中main.js使用方法详解

    当我们创建一个Vue项目时,main.js是一个非常重要的入口文件,其作用是引入Vue库,创建Vue实例,并将Vue实例挂载到指定的DOM元素上。下面详细讲解main.js使用方法。 1. 引入Vue库和App.vue组件 首先,我们需要在main.js文件中引入所需的依赖:Vue库和App.vue组件。示例代码如下: import Vue from ‘vu…

    Vue 2023年5月27日
    00
  • 详解vue 中使用 AJAX获取数据的方法

    下面我将为您详细讲解在Vue中使用AJAX获取数据的方法。 一、前提条件 在使用Vue进行数据获取前,需要预先安装并引入Vue及其相关的插件,推荐使用Vue-cli进行项目的创建,在Vue-cli中已经为开发者配置好了相关的环境和插件。在安装完Vue和相关插件后,就可以开始使用Vue进行数据获取了。 二、Vue中使用AXIOS进行AJAX数据获取 Vue中常…

    Vue 2023年5月28日
    00
  • 基于axios 的responseType类型的设置方法

    关于基于axios的responseType类型的设置方法,我可以给你讲解一下。下面是一份详细攻略: 什么是responseType? responseType是指定响应的数据类型,常用的有五种,分别是: json :返回JSON数据 arraybuffer :返回二进制数据 blob :返回二进制数据 document :返回HTML文档 text :返回…

    Vue 2023年5月28日
    00
  • 一文详解Vue3响应式原理

    一文详解Vue3响应式原理 前言 Vue.js作为前端框架的代表之一,其响应式原理一直是其独特的魅力所在。Vue3中,响应式原理进行了一些重大调整和改进,本文将详细讲解Vue3响应式原理及其实现过程。 响应式原理 Vue的响应式原理是基于ES6中Object.defineProperty()的getter和setter方法实现的。Vue3在这个基础上,引入了…

    Vue 2023年5月28日
    00
  • Springboot与vue实现数据导出方法具体介绍

    下面我将详细讲解“Springboot与vue实现数据导出方法具体介绍”的完整攻略。 一、准备工作 在开始实现前,需要准备以下环境: Java环境:安装JDK1.8+ Maven环境:安装Maven Vue环境:安装Vue.js IDE:推荐使用IDEA或Eclipse 二、后端实现 在Springboot项目中添加Maven依赖 在pom.xml文件中添加…

    Vue 2023年5月27日
    00
  • vue中定时器setInterval的使用及说明

    关于“vue中定时器setInterval的使用及说明”的完整攻略,具体内容如下: 概述 JavaScript中的setInterval函数可以用来设置定时器,定时执行一些操作。在Vue.js中,我们也可以使用setInterval函数来实现类似的定时操作。本篇攻略主要介绍如何在Vue.js中使用setInterval函数。 使用方法 在Vue.js中,我们…

    Vue 2023年5月29日
    00
  • Vue数据驱动模拟实现3

    Vue数据驱动模拟实现是指通过手动实现Vue框架底层的部分功能,来深入理解Vue的数据响应式原理。下面我们将给出实现Vue数据驱动的完整攻略: 1. 实现数据响应式 Vue的数据响应式是基于Object.defineProperties实现的,我们可以手动实现一个简化版的数据响应式: function defineReactive(obj, key, val…

    Vue 2023年5月28日
    00
  • vue-router的钩子函数用法实例分析

    下面我将为你详细讲解“vue-router的钩子函数用法实例分析”。 什么是vue-router的钩子函数 vue-router的钩子函数是在路由中设置的一些回调函数,可以在路由导航过程中进行各种操作。vue-router提供了多种路由导航钩子函数,可以分为全局钩子函数和组件内钩子函数。 其中,全局钩子函数是作用于整个应用程序的,包括跳转之前、跳转之后以及错…

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