51工具盒子也许您已经在前端世界中使用路由器有一段时间了，但是...您自己编写过路由器吗？你知道路由器的基础吗？看起来它似乎可以正常工作，但在幕后，路由器必须处理几件事。
路由器是负责路由的组件。我们可以将路由定义为找到到达多个目的地的路径的动作。这适用于不同的领域。
例如，如果您按下带有数字 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>
再试一次并单击按钮，它应该仍然以相同的方式工作。在这里找到本文中的
代码和演示并亲自尝试一下！
