vue安装,router-link的一些属性,用法,tag active-class,to,replace,exex等等
第一步:$ npm install -g vue-cli
第二部:$ vue init webpack my-projectName
下面内容转载自:https://www.cnblogs.com/chengjunL/p/6282125.html
在vue1.0版本的超链接标签还是原来的a
标签,链接地址由v-link
属性控制
而vue2.0版本里超链接标签由a
标签被替换成了router-link
标签,但最终在页面还是会被渲染成a标签的
至于为什么要把a换成router-link原因还是有的,比如我们之前一直惯用的nav导航里面结构是(ul>li>a),touter-link可以渲染为任何元素,这里可以直接渲染成li标签,同样能实现跳转效果,节省了a标签的使用,还有一个原因可能是因为a标签正常是链接的跳转的作用,点击a时可能会重载页面,使用router-link,此标签会被vue所监听,跳转链接时就不会刷新页面了。当然这个人理解,不对之处有望指正。
"router-link"属性
1.":to" 属 性
相当于a标签中的"herf"属性,后面跟跳转链接所用
<router-link :to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>
2."replace" 属 性
replace在routre-link标签中添加后,页面切换时不会留下历史记录
<router-link :to="/home" replace></router-link>
3."tag" 属 性
具有tag属性的router-link会被渲染成相应的标签
<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染结果 -->
<li>Home</li>
此时页面的li同样会起到a链接跳转的结果,vue会自动为其绑定点击事件,并跳转页面
例子见下图:
<router-link tag="li" to="/about0">
About0
</router-link>
4."active-class" 属 性
这个属性是设置激活链接时class属性,也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性
<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class
属性的默认值是router-link-active
,所以如果没有设置,就会被渲染为这个class
可以在router.js里面设置
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})
也可以在样式文件中写:
.router-link-active{
background-color:red;
}
截图例子是为了讲解清楚:
5."exact" 属 性
开启router-link
的严格模式
<router-link :to="/" exact>home</router-link>
上面这个标签如果不加exact
属性,则会在vue2.leenty.com/article
页面下也会被匹配到,
这却不是我们的本意,在加了这个属性后就会正确的匹配到vue2.leenty.com
下
vue安装,router-link的一些属性,用法,tag active-class,to,replace,exex等等的更多相关文章
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
- Vue安装及项目介绍
目录 创建Vue项目 环境安装 创建项目 pycharm打开Vue项目 项目目录介绍 入口文件(main.js) 路由配置(router.js ) 组件 前台路由的基本工作流程 目录结构 根组件(Ap ...
- vue安装使用
一.安装(cmd) 1.全局安装vue cnpm install --global vue-cli 2.cd到需要创建项目的文件夹下 3.创建项目 项目是基于webpack的 vue init web ...
- VUE安装步骤1
文件结构 用官方的 vue-cli 生成的项目文件结构如上图所示,简单介绍下上面图中各文件的作用. src 文件夹 : 1. assets 文件夹:存放各种资源文件,如图片等 2. component ...
- vue安装及环境搭建
vue项目在pycharm里运行需要安装一个插件,打开settings,找到plugins,里面搜索vue.js,点击安装. vue安装 先安装node.js npm install -g @vue/ ...
- Vue系列(2):Vue 安装
前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...
随机推荐
- Java窗体居中显示的2种方法
第1种方法: //setSize(300, 200); pack(); // 得到显示器屏幕的宽.高 int width = Toolkit.getDefaultToolkit().getScreen ...
- C#作为客户端调用gsoap生成的C++服务端
近日在学习C++,偶然遇到网友想用C#调用gsoap生成的C++服务的问题,遂决定研究一下,网上搜索了很久,大多数是C++调用C#的应用.... 经过本人的不断努力,终于找到一种解决问题的方法,总结如 ...
- Windows10下virtualenv配置
1.安装virtualenv pip install virtualenv 2.选定一个目录,作为存储不同环境的总目录 3.安装virtualenvwrapper-powershell(只适用于Pyt ...
- YII2 使用phpexcel(干货)
参考:http://www.cnblogs.com/xiaocongjiejie/p/5106249.html http://www.cnblogs.com/xiaocongjiejie/p/5106 ...
- WebViewJavascriptBridge的使用说明
WebViewJavascriptBridge 项目介绍 在Obj-C 和 WKWebView, UIWebView 中的 Javascript之间传送信息的桥梁. 项目地址 如何使用 Javascr ...
- OpenGL 获取当前屏幕坐标的三维坐标(gluUnProject使用例子 Qt)
之前使用VS+glut实现了gluUnProject使用例子,用于渲染管道的逆过程,将屏幕坐标转换为opengl三维坐标,本文将尝试使用QT来实现. 代码如下: main.cpp 12345678 ...
- JS字符串常用方法总结
1.toLowerCase(): 把字符串转为小写,返回新的字符串. var str="Hello World"; var str1=str.toLowerCase(); cons ...
- Mysql Window 解压版 忘记密码
1. 首先检查mysql服务是否启动,若已启动则先将其停止服务,可在开始菜单的运行,使用命令: net stop mysql 打开第一个cmd1窗口,切换到mysql的bin目录,运行命令: mysq ...
- DBeaver连接MySQL 8.0显示"Unable to load authentication plugin 'caching_sha2_password'."错误的问题
下载MySQL绿色版本mysql-8.0.12-winx64,手动安装完成后.使用DBeaver连接提示"Unable to load authentication plugin 'cach ...
- centos 安装 python36
centos6 安装 python36 临时方法: https://www.softwarecollections.org/en/scls/rhscl/rh-python36/ 方法二: http:/ ...