vue 路由的简单配置（一个小案例）

要点：

 

 

 

写入两个组件,这两个组件内容就是需要页面切换的内容 

 

安装 vue-router

然后进行引用和使用,当时我们在讲vuex的时候,就是说引了和使用了vuex之后就会出现一个全新的配置项store这边也是类似的

 引用后就可以使用一个全新的配置项

 然后创创建一个router文件夹,里面写入index.js专门用来创建整个应用的路由器

要引用vue-router 还有引用配置路由的组件

然后进行创建和进行路由的配置,并进行暴露

然后在main,js里进行引用该文件进行配置router

当运行页面发现上面路径有#就说明路由器已经开始工作了 

此时我们已经实现了红圈的配置好了路由器

而我们这边就要使用了router库中给我们的一个标签进行点击实现切换路由

使用router-link 其中to代表对应的路径

发现router-link标签样式上和a标签没有差别 发现自动转成了a标签

 

然后加入一个active-class标签属性，就代表对应哪个路径被激活就触发哪个样式

active为class样式

 

但是此时vue不知道这边里面要放的是什么内容跟插槽一样，它不知道放在哪里

在需要添加组件的位置加入一个router-view标签