Vue-Router笔记

原创 疯狂weber 教程 VUE 138阅读 2018-03-14 15:03:14 举报

Vue.js的一大特色就是构建单页面应用十分方便,既然要方便构建单页面应用那么自然少不了路由,vue-router就是vue官方提供的一个路由框架。总体来说,vue-router设计得简单好用,下面就来聊聊我实际用到过的一些方法,文章没有提到的可以去查看官方文档。vue-router的安装这里就不提了,相信会来看这篇博客同学,这些基本能力都是有的。

router结构

当我们用vue-cli配置好环境时,在文件src -> router -> index.js 里面就是默认配置好的路由结构

如果有多个页面,只需要创建好模块页及引用即可

mode
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

linkActiveClass
全局配置 <router-link> 的默认『激活 class 类名』

router-link

router-link组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

to
这是一个必须设置的属性,否则路由无法生效。它表示路由的链接,可以是一个字符串也可以是一个描述目标位置的对象。

tag
router-link默认渲染成a标签,也有方法让它渲染成其他标签,tag属性就用来设置router-link渲染成什么标签的。

exact
一般而言,router路由会匹配所有匹配到的路由组价,exact能够使得路由的匹配更严格一些。

router-view

这个组件十分关键,它就是用来渲染匹配到的路由的视图组件。

评论 ( 3 )
最新评论
大神M 2F 2018-03-14 15:14:37 3F

哈哈,抬举我啦

疯狂weber 1F 2018-03-14 15:11:09 2F

不过目前市场对vue前端框架这种用法思维还是比较火的,可以先学习学习,对于大神可能看一下文档就基本上手了。

大神M 2018-03-14 15:05:29 1F

vue我还没接触,学起来应该不难,目前唯一觉得就是VUE针对SEO可能不太友好。