×

Vue路由基础应用:创建您自己的 Vue.js 路由器

作者:Terry2023.07.16来源:Web前端之家浏览:1292评论:0
关键词:vuejsvue-router

也许您已经在前端世界中使用路由器有一段时间了,但是...您自己编写过路由器吗?你知道路由器的基础吗?看起来它似乎可以正常工作,但在幕后,路由器必须处理几件事。

路由器是负责路由的组件。我们可以将路由定义为找到到达多个目的地的路径的动作。这适用于不同的领域。

image.png

例如,如果您按下带有数字 5 的按钮,电梯的路由器将带您到五楼。

在Web开发中,我们可以看到路由的两个主要领域:

  • 后端:路由器调用正确的控制器,匹配 url 模式。

  • 前端:路由器将相应的组件加载到视图中,匹配 url 模式。

在本系列中,我们将了解如何使用 Vue.js 创建自己的前端路由器,以了解路由器的机制。

创建基本路由器组件

我们首先创建用于路由的组件Home和Articles 。内容并不重要,因为只是为了显示该路线上的某些内容,如下所示就足够了:

<!-- Home.vue -->
<template>
  <div>Home</div>
</template>

<!-- Articles.vue -->
<template>
  <div>Articles</div>
</template>

由于 Vue.js 是一个基于组件的框架,因此创建路由器的一种简单方法是使用组件。这种方式更加通用,因为任何使用过任何基于组件的工具的前端开发人员都能够理解它。

定义路线

让我们首先创建一个应用程序路由器。vue文件将是 Router 组件本身,其中包含路由的定义:

<!-- Router.vue -->
<script>
  import HomePage from "./HomePage";
  import ArticlesPage from "./ArticlesPage";
  
  const routes = {
    "/": HomePage,
    "/articles": ArticlesPage
  };
  </script>

我正在导入主页和文章页面组件并创建一个对象,routes其中键是路由路径,值是组件本身。以这种方式访问路由既简单又快速,因为访问对象属性是直接操作,只需执行routes["/"].

如果您需要更多自定义,定义它们的其他方法是使用对象作为值:

const routes = {
  "/": {
    component: HomePage,
    default: true, // indicate if it's the default route
    name: "root"
  }
}

您也可以使用数组来完成此操作,就像vue-router一样。数组解决方案更灵活,但也更复杂,因为稍后您需要循环:

const routes = [
  {
    path: "/"
    component: HomePage
  }
}

// A simple way to get the component is using ES2015 array find method
const route = routes.find(route => route.path === "/");

渲染 Router 组件
一旦我们设置了路由,我们就需要一种在给定条件下渲染组件的方法。Vue.js 模板为我们提供了动态组件,非常适合我们的案例。

<component>动态组件允许我们通过使用特殊元素、使用is属性作为条件来轻松地在组件之间进行热交换:

<template>
  <component :is="routedComponent"></component>
</template>

然后我们需要实现这个条件。由于该条件会根据路线而变化,因此计算属性非常适合此目的:

export default {
  data() {
    return { current: window.location.pathname };
  },
  computed: {
    routedComponent() {
      return routes[this.current];
    }
  }
};

计算属性将是返回默认路由(不匹配任何路由的路由)的组件的好地方,并且它就像使用 OR 运算符一样简单:

routedComponent() {
  return routes[this.current] || DefaultComponent;
}

最终的Router.vue组件是:

<!-- Router.vue -->
<template>
  <component :is="routedComponent"></component>
</template>

<script>
import HomePage from "./HomePage";
import ArticlesPage from "./ArticlesPage";

const routes = {
  "/": HomePage,
  "/articles": ArticlesPage
};

export default {
  data() {
    return { current: window.location.pathname };
  },
  computed: {
    routedComponent() {
      return routes[this.current];
    }
  }
};
</script>

作为替代解决方案,渲染函数(或 JSX)非常适合这种情况,因为默认情况下使用渲染函数进行渲染是动态的。因此,您可以在Router.js文件中重写该组件:

// Router.js
import HomePage from "./HomePage";
import ArticlesPage from "./ArticlesPage";

const routes = {
  "/": HomePage,
  "/articles": ArticlesPage
};

export default {
  data() {
    return { current: window.location.pathname };
  },
  computed: {
    routedComponent() {
      return routes[this.current];
    }
  },
  render(createElement) {
    return createElement(this.routedComponent);
  }
};

使用路由器组件

让我们创建一个App.vue组件作为应用程序的根组件。然后导入并注册router组件:

<!-- App.vue -->
<template>
  <div>
    <app-router></app-router>
  </div>
</template>

<script>
import AppRouter from "./AppRouter";

export default {
  components: {
    AppRouter
  }
};
</script>

在模板中,我们放置<app-router>将被路由器渲染的组件替换的标签。在脚本部分,导入 Router 并将其添加到 App 组件中。

如果您运行该应用程序并/通过/articles在浏览器栏中写入路由来进行导航,您应该会看到路由器加载相应的组件及其内容。

为了使它更方便,让我们添加几个按钮和一个方法来在App.vue中的路由之间导航:

<!-- App.vue -->
<template>
  <div>
    <button @click="goTo('/articles')">Go to Articles</button>
    <button @click="goTo('/')">Go to Home</button>
    <app-router></app-router>
  </div>
</template>

<script>
import AppRouter from "./AppRouter";

export default {
  components: {
    AppRouter
  },
  methods: {
    goTo(route) {
      window.location = route;
    }
  }
};
</script>

再试一次并单击按钮,它应该仍然以相同的方式工作。在这里找到本文中的
代码和演示并亲自尝试一下!


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuerouter20230716.html

网友评论文明上网理性发言 已有0人参与

发表评论: