vue-router 4使用实例详解

下面是“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开发的任何项目中。