天天看点

Vue-Router(一)

<code>vue-router</code>是<code>Vuejs</code>的官方推荐路由,让用 Vue.js 构建单页应用变得非常容易。目前Vue路由最新的版本是4.x版本。

<code>vue-router</code>是基于路由和组件的

路由用于设定访问路径, 将路径和组件映射起来.

在<code>vue-router</code>的单页面应用中, 页面的路径的改变就是组件的切换.

第一步:创建路由组件的组件;

第二步:配置路由映射、传入映射关系的<code>routes</code>数组;

第三步:通过<code>createRouter</code>创建路由对象,并且传入<code>routes</code>和<code>history</code>模式;

第四步:使用路由: 通过<code>&lt;router-link&gt;</code>和<code>&lt;router-view&gt;</code>;

Vue-Router(一)

<code>index.js</code>

Vue-Router(一)

<code>main.js</code>

Vue-Router(一)

<code>App.vue</code>

Vue-Router(一)

<code>显示效果</code>

Vue-Router(一)

本文介绍了<code>Vue-router</code>的最小使用<code>demo</code>、当然、一个强大的框架背后肯定远远不止这些,未完待续...

vue