Vue.js中安装一个路由器demo

时间:2022-12-13 Jovie 人气:0

正文

单页应用程序是或多或少复杂的应用程序，它加载一个单一的HTML页面。每当用户与它们互动时，它们就会使用JavaScript动态地更新其内容。

JavaScript框架，如React和Vue，使我们能够非常容易地创建SPA。然而，为了使用Vue.js创建多页面的SPA，我们将需要使用一个路由器。vue-router库是Vue.js的官方路由器，也是我们在本文中要使用的。

在这篇文章中，我们将讨论如何在Vue.js中安装一个路由器，以及如何创建我们的路由和管理应用程序中不同视图之间的导航的一些基本知识。让我们开始吧!

什么是vue-router，它是如何工作的？

Vue Router是一个JavaScript库，你可以用来在你的Vue.js应用程序中设置路由。通过vue-router，你可以定义路由并将其映射到组件。你还可以使用路由器来管理你的应用程序中不同视图之间的导航。

vue-router的功能与React Router DOM等其他解决方案非常相似，它为我们提供了许多功能：

支持HTML5历史API，实现干净的URL。
路由的懒散加载。
路线参数、查询、通配符。
由Vue.js的过渡系统提供的视图过渡效果。

如何安装vue-router库

要安装vue-router，你需要使用你喜欢的Node.js包管理器，无论是npm还是yarn。在你的终端，和你的项目文件夹内，你可以运行以下命令：

npm install vue-router

或

yarn add vue-router

vue-router安装后，你将需要在你的Vue.js应用程序入口处导入它。例如，如果你使用Vue 3来创建你的项目，你可以在src/main.js中导入vue-router，如下。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
createApp(App).use(router).mount("#app");

自动安装Vue Router

如果你使用Vue CLI来创建你的新项目，你会得到一个选项，即从一开始就添加一个路由器。这种选择也会给你所有的模板和结构，你需要立即开始使用所有的路由功能。

然而，这可能并不总是一种选择。例如，如果你正在使用Vite来设置你的项目（一个越来越流行的替代方案），或者如果你有一个以前的项目现在需要扩展，你就必须手动安装Vue Router库，如上一节所示。

创建一个基本的vue-router例子

为了使用Vue Router库附带的功能，你需要创建一个实例，在你的main.js文件中导入它，并告诉Vue把它作为一个路由器使用。

为此，你需要创建一个新的JavaScript文件，在那里你将添加路由器正常工作所需的所有基本代码。为了简单起见，我们将创建一个名为router 的文件夹，里面只有一个index.js文件，我们将在这里写下我们的路由器的所有代码。

import { createRouter, createWebHistory } from "vue-router";
const routes = [];
const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_APP_ENV),
  routes,
});
export default router;

在vue-router中创建路由

在你的项目中安装和设置了vue-router后，你可以开始创建路由。路由是由HTTP方法和路径的地图定义的，并与一个组件相关联。

在vue-router中，创建路由的方法是使用VueRouter构造函数。这个函数接收一个路由对象作为参数，我们可以在这里定义我们的路由。路由需要以数组格式来定义。

const routes = [
  {
    path: "/",
    component: HomeComponent
  },
  {
    path: "/about",
    component: AboutComponent
  },
]

对于我们想要创建的每个路由，我们需要在路由数组中添加一个对象。这个对象至少要有两个属性：路径和组件。path属性对应的是我们想要映射到一个组件的URL路径。component属性是访问路由时将被渲染的Vue组件。

在上面的例子中，我们定义了两条路由：一条是主页（/），另一条是关于页面（/about）。当用户导航到主页时，HomePage 组件将被呈现。同样地，当用户导航到"/about "时，显示的将是AboutPage 组件。

当然，你必须在Router文件中导入这两个组件，才能使这个例子发挥作用。

你也可以使用动态导入来异步加载组件。如果你想懒散地加载组件，这特别有用，这可以提高大型应用程序的性能。

在组件中渲染你的视图

一旦你定义了你的路由，你将需要告诉vue-router在哪里渲染视图。为此，vue-router为我们提供了**组件。这是一个占位符，将被替换为与当前活动路由相关的组件。

为了使用这个组件，你需要在你的应用程序的某个地方添加它，一般是在你的App.vue文件的模板中。

<template>
  <section>
    <router-view />
  </section>
</template>

有了这段代码，当用户导航到/about时，他们将看到AboutPage组件在*中被渲染。*同样地，当他们导航回/（主页）时，他们会看到HomePage组件。

用vue-router管理视图之间的导航

一旦你定义了路由，并插入了*组件，你就可以开始使用vue-router在应用程序的不同视图之间进行导航。vue-router库为我们提供了两种执行导航的方式：router-link和vue-router实例方法push*。

Router-link是一个Vue组件，让我们在应用程序中定义内部链接。它默认渲染一个*标签，但如果我们向它传递一个标签属性，它也可以渲染其他类型的元素。例如，我们可以使用来渲染一个*元素。

<a href="https://link.juejin.cn?target=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" ><router-link to="/about" tag="button">Go to About</router-link>
</a>

这个按钮在被点击时将把我们带到"/about "页面，而不需要重新加载我们的应用程序。

另一方面，vue-router实例方法push可以被用来以编程方式导航到一个给定的路由。为了使用这个方法，我们需要有一个对vue-router实例的引用。最简单的方法是使用所有Vue组件上的"$router "属性，如果我们使用选项API的话。

<a href="https://link.juejin.cn?target=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" >this.$router.push({ path: '/about' })
</a>

或者通过在我们的组件中创建一个本地路由器实例，如果我们使用Composition API的话。

<a href="https://link.juejin.cn?target=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" >import { useRouter } from 'vue-router';
const router = useRouter();
function redirect() {
  router.push({ path: '/about' });
}
</a>

有了这些代码，当按钮被点击时，用户将被重定向到"/about"。

最后的思考

在这篇文章中，我们回顾了如何在Vue.js应用程序中安装和设置vue-router。我们还研究了如何在我们的应用程序中创建路由并管理不同视图之间的导航。

加载全部内容