Vue路由最全详解

现在的手机软件普遍都是单页面应用，尤其是商城类网站应用更广，那么为什么大多数企业都选择了单页面应用呢，原因主要是1，单页面应用只有一个主页面，切换页面更加流畅，比起传统的多页面应用项目会很清晰明了，没有多页面应用繁杂。

那么单页面应用是怎么实现的呢?这里就要讲到Vue了，Vue是公认的前端三大框架之一，还有react，angular，这里主要讲解Vue，日后在讲解其余两个框架吧。

引入Vue.js，当加入Vue Router时，我们就需要把我们的组件映射到路由上，让Vue Router知道在哪里渲染他们，先举一个js原生路由的例子:

首先创建一个HTML 搭建好如下结构

创建三个div模拟三个页面

然后写入js

页面效果如下：

 

点击哪个按钮，相对应的页面就会显示。 

 这样就算创建完成一个简单的单页面应用，现在看起来页面还行，代码也没有很多，但是你要知道这只是一个用来示例的简单框架，在企业中代码量可是上万行的，甚至更多，要写在这一个页面里也就算了，日后更新维护要一行一行的翻吗?考虑到这我们就想到了Vue给我们提供的路由组件，用来非常方便，一起来看一下示例

我们可以清晰地看到，Vue把每个页面分开了，没有一块放到一个主页面里，这样在以后的修改维护中只需要找到对应要修改的组件即可，工作量大幅度减少，那怎么渲染相对应的组件呢 ，这时只需修改Router文件夹中js的配置即可，如下图，

如要继续增加页面，只需创建对应的vue组件，在去router路由里输入正确的路径即可，非常简单方便。

接下来看一下页面效果：

 

这样，我们的整体框架就搭建的差不多了，只需要往里填入内容即可！

但是我们在各种商城APP中注意到，在一个页面中点开同样也包含多个页面，这该怎么实现呢，这就要说到vue的动态路由匹配了，只需要给router文件中的路由配置中加上/id即可，来看一下