Vue Router实作

在昨天介绍了vue-router，我们知道vue-router就是扮演一个网址提供者的脚色，让每个画面都能有自己专属的网址，那今天就要使用vue-cli来实作vue-router啦

先来看一下这个首页吧!

在这里的画面切换就是在MainMenu中的template.html中使用router-link的标签，而在views中的App.vue档使用router-view的标签，让它去告诉router对应到的component要放在这个地方，然後在router中的index.js中用一个routes阵列，里面放三个path以及三个component也就是要让我们在画面中看到的首页、存货和销货三个页面他们都有各自的路径和component，这样在我们在切换页面的的时候就可以看到他们都会有自己对应的网址，而这里的router使用的是Nested Route

什麽是Nested Routes呢?让我们用官网上的说明图吧!

从这张图中我们可以知道在User的内容里要做改变的时候就会使用到Nested Routes，所以在这里我们需要使用到Nested Route让我们页面的header和menu保持一样的格式，只去改变每个页面的内容部分

题外话~
要使用vue-cli开启画面在terminal的地方输入npm run serve 他就会产生 port 让我们能够开启画面

Demo
github