路由是一个网络工程里面的术语。路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科
*Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成,使使用Vue.js轻松构建单页应用程序
变得轻而易举。功能包括:
改变URL,但是页面不进行整体的刷新。 如何做到这一点呢?
history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.
路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
因为我们已经学习了webpack, 后续开发中主要是通过工程化的方式进行开发的.我们直接使用npm来安装路由即可.
npm install vue-router --save
左边创建导入使用Vue-router并配置映射关系,
步骤图解 效果图
路由的默认路径即:默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容. 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.
我们只需要配置多配置一个映射就可以了.
我们在routes中又配置了一个映射. path配置的是根路径: / redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.
我们前面说过改变路径的方式有两种:
如果希望使用HTML5的history模式, 非常简单, 在router.js进行如下配置即可:
在前面的<router-link>中, 我们只是使用了一个属性: to
, 用于指定跳转的路径.
<router-link>还有一些其他属性:
<router-link to='/home' tag='li'>
<router-link>
对应的路由匹配成功时, 会自动给当前渲染的标签元素设置一个router-link-active
的class
, 在标签内设置active-class
可以修改默认的名称router-link-active
. 有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了 比如, 我们修改之前的router-link为button并绑定click,将代码修改如下:
当然如果我们不想用push这种可以返回的路由控制,我们也可以用this.$router.replace('/home')