第一步:$ 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等等的更多相关文章

  1. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  2. vue(5)—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  3. 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  4. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  5. Vue安装及项目介绍

    目录 创建Vue项目 环境安装 创建项目 pycharm打开Vue项目 项目目录介绍 入口文件(main.js) 路由配置(router.js ) 组件 前台路由的基本工作流程 目录结构 根组件(Ap ...

  6. vue安装使用

    一.安装(cmd) 1.全局安装vue cnpm install --global vue-cli 2.cd到需要创建项目的文件夹下 3.创建项目 项目是基于webpack的 vue init web ...

  7. VUE安装步骤1

    文件结构 用官方的 vue-cli 生成的项目文件结构如上图所示,简单介绍下上面图中各文件的作用. src 文件夹 : 1. assets 文件夹:存放各种资源文件,如图片等 2. component ...

  8. vue安装及环境搭建

    vue项目在pycharm里运行需要安装一个插件,打开settings,找到plugins,里面搜索vue.js,点击安装. vue安装 先安装node.js npm install -g @vue/ ...

  9. Vue系列(2):Vue 安装

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...

随机推荐

  1. Java窗体居中显示的2种方法

    第1种方法: //setSize(300, 200); pack(); // 得到显示器屏幕的宽.高 int width = Toolkit.getDefaultToolkit().getScreen ...

  2. C#作为客户端调用gsoap生成的C++服务端

    近日在学习C++,偶然遇到网友想用C#调用gsoap生成的C++服务的问题,遂决定研究一下,网上搜索了很久,大多数是C++调用C#的应用.... 经过本人的不断努力,终于找到一种解决问题的方法,总结如 ...

  3. Windows10下virtualenv配置

    1.安装virtualenv pip install virtualenv 2.选定一个目录,作为存储不同环境的总目录 3.安装virtualenvwrapper-powershell(只适用于Pyt ...

  4. YII2 使用phpexcel(干货)

    参考:http://www.cnblogs.com/xiaocongjiejie/p/5106249.html http://www.cnblogs.com/xiaocongjiejie/p/5106 ...

  5. WebViewJavascriptBridge的使用说明

    WebViewJavascriptBridge 项目介绍 在Obj-C 和 WKWebView, UIWebView 中的 Javascript之间传送信息的桥梁. 项目地址 如何使用 Javascr ...

  6. OpenGL 获取当前屏幕坐标的三维坐标(gluUnProject使用例子 Qt)

    之前使用VS+glut实现了gluUnProject使用例子,用于渲染管道的逆过程,将屏幕坐标转换为opengl三维坐标,本文将尝试使用QT来实现. 代码如下:  main.cpp  12345678 ...

  7. JS字符串常用方法总结

    1.toLowerCase(): 把字符串转为小写,返回新的字符串. var str="Hello World"; var str1=str.toLowerCase(); cons ...

  8. Mysql Window 解压版 忘记密码

    1. 首先检查mysql服务是否启动,若已启动则先将其停止服务,可在开始菜单的运行,使用命令: net stop mysql 打开第一个cmd1窗口,切换到mysql的bin目录,运行命令: mysq ...

  9. 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 ...

  10. centos 安装 python36

    centos6 安装 python36 临时方法: https://www.softwarecollections.org/en/scls/rhscl/rh-python36/ 方法二: http:/ ...