Vue学习笔记之认识vue-router、安装路由和它的应用及技巧

认识vue-router

1、概念：vue-router是vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。在使用 vue-router 时，我们需要做的就是把路由映射到各个组件，vue-router 会把各个组件渲染到正确的地方。在vue-router的单页面应用中，页面的路径的改变就是组件的切换。

2、安装环境：cnpm install vue-router --save

3、环境配置：

第一步：导入路由对象，并且调用Vue.use(VueRouter)

第二步：创建路由实例，并且传入路由映射配置

第三步：在Vue实例中挂载创建的路由实例

使用路由router实例：

4、使用路由：

第一步，创建路由组件：

第二步，配置路由的映射，组件和路径的映射关系

第三步，使用路由，通过<router-link>和<router-view>

<router-view>的作用是界面显示的位置在标签的前面还是后面

系统运行后：点击home标签

点击about标签：

PS：如果需要进入页面时，默认一个页面，则可以增加一个默认值path：’/‘ 这样在进入的时候，默认是显示home这个页面的内容(即是路由的默认值)：

默认进去就是主页的界面：

第四步，修改为history模式：

在默认的情况，是通过hash模式，使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。如果我们想改变这个模式，可以在路由中进行模式的配置：

这样，在页面访问的URL地址中，就是用history的模式来显示URL值了（history模式，这种模式充分利用history.pushState API来完成URL跳转而无须重新加载页面）：

比较两种方式的URL值：URL展示上，hash模式有“#”，history模式没有

hash：localhost:8080/#/about

history：localhost:8080/about

 

第五步，其他知识的补充：

router-link中的to属性是跳转到哪个页面，指定跳转的路径。

1、router-link补充：tag：tag可以指定router-link之后渲染成什么组件，例如tag=‘li’会被渲染成一个<li>元素，tag=’button‘，则会被渲染成一个按钮：

2、网页上的返回按钮，是因为默认是pushState，如果不想要这个返回按钮，则可以改为replaceState模式，在router-link的属性中增加 replace 属性即可：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中(但是vue3.0的版本好像不是通过这个属性去实现的，有待考究)

3、active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class（3.0的是router-link-exact-active）

通过改变这个类的属性，可以简单快捷地实现一些需求，例如：改变字体颜色；当点击某个内容时，改变内容颜色等，可以通过这个属性值在<style>里去改变：

运行结果：

4、通过代码的方式修改路由 vue-router：在模板中不使用router-link来实现页面的调整，可以通过监听点击动作来实现页面的转换，但不能绕过路由去改变地址，需要通过this.$router.push('/')来改变URL值。设置两个按钮：

然后实现按钮的动作：

如果不想要这个返回按钮，可以把push用replace来进行URL值的改变：