vue2.X的路由

以 / 开头的嵌套路径会被当作根路径。

 

在vue-router1.X中是以<a v-link=""></a>存在的

里面的参数:

  to:代表跳转的目的地,渲染成<a href="">  后面目的地有下面几种表示法

    to引导(不用解析)     to="/home"  字符串路径    

    :to引导(需要解析)   :to=" 'home' "     :to="{ path: 'home' }" path路径         :to="{ name: 'user' }" 具名路径

  tag:把默认的a标签可以自由指定

    如 tag="li"  ,就是把渲染后的标签变为<li></li>          <router-link to="/foo" tag="li">foo</router-link>          -- 渲染结果 -->     <li>foo</li>

  replace:   设置 replace 属性的话,导航后不会留下 history 记录       <router-link :to="{ path: '/abc'}"   replace></router-link>       调用 router.replace() ———>来代替 router.push()

  append:  设置 append 属性后,则在当前(相对)路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b   <router-link :to="{ path: 'relative/path'}" append></router-link>

  active-class: 默认值: "router-link-active" 链接激活时使用的 CSS 类名,在全局初始化的时候配置;

    

 

 

js内部写的编程式导航:

  router.push () :   这个方法会向 history 栈添加一个新的记录,可以通过浏览器自带的后退,回到之前的url,等于<router-link :to="..."> 

  router.replace(); 相当于<router-link :to="..." replace> 跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

  router.go(n): 其中n代表的整数,相当于window.history.go(n)  router.go(1)相当于router.forward()     router.go(-1) 相当于router.back() 

 

路由信息对象的属性:    route object 是 不可变的,每次成功的导航后都会产生一个新的对象。

      

  $route.path  类型: string  字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"

  $route.params  类型: Object  一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。

  $route.query  类型: Object 一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

  $route.hash  类型: string  当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。

  $route.fullPath  类型: string  完成解析后的 URL,包含查询参数和 hash 的完整路径。

  $route.matched  类型: Array  就是new VueRouter({ routes: [] })中的routes的数组

  $route.name  当前路由的名称,如果有的话

 

router下面有个app的属性,是APP.vue中template中的所有,也就是挂接到index中id=“app”的dom

转载于:https://www.cnblogs.com/faith3/p/6237393.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456501.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql启动和关闭外键约束的方法(FOREIGN_KEY_CHECKS)

在MySQL中删除一张表或一条数据的时候&#xff0c;出现 [Err] 1451 -Cannot delete or update a parent row: a foreign key constraint fails (...) 这是因为MySQL中设置了foreign key关联&#xff0c;造成无法更新或删除数据。可以通过设置FOREIGN_KEY_CHECKS变量来避免这种…

CentOS下安装VirtualEnv的教程

文章目录前言&#xff1a;1、下载安装virutalenv2、安装新的Python版本&#xff08;可以直接安装anaconda&#xff1a;安装过程可自行查资料&#xff09;3、 VirtualEnv的设置4、Python虚拟环境的作用总结&#xff1a;前言&#xff1a; 在目前的Linux系统中&#xff0c;默认使…

社保(五险一金)的问题

2019独角兽企业重金招聘Python工程师标准>>> 社保&#xff0c;全称为社会保险&#xff0c;是一种再分配制度&#xff0c;它的目标是保证物质及劳动力的再生产和社会的稳定。我们平时常说的社保&#xff0c;还有另一个名称&#xff0c;及“五险一金”。那么社保是哪五…

PKM(个人知识管理)类软件收集(偶尔更新列表)

evernote(印象笔记) Wiz 有道云 麦库 leanote GoogleKeep OneNote SimpleNote(wp家的&#xff0c;免费) pocket(稍后读的软件&#xff0c;同类的还有Instapaper&#xff0c;国内的收趣) MyBase RaysNote(v友开发) CintaNotes https://jitaku.io 开源 Gitit-Bigger Laverna pape…

MySQL中外键的定义、作用、添加和删除

1 简介 在实际开发的项目中&#xff0c;一个健壮数据库中的数据一定有很好的参照完整性。例如学生档案和成绩单两张表&#xff0c;如果成绩单中有张三的成绩&#xff0c;学生档案中张三的档案却被删除了&#xff0c;这样就会产生垃圾数据或者错误数据。为了保证数据的完整性&a…

Hive报错:Error: FUNCTION 'NUCLEUS_ASCII' already exists. (state=X0Y68,code=30000)

Hive执行schematool -initSchema -dbType derby报错。 报错的日志&#xff1a; doupeihuadoupeihua-2104 ~/software/hive/bin $ schematool -initSchema -dbType derbySLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/home/doupei…

Andorid Scrolling Activity(CoordinatorLayout详情)

1.new project -> Scrolling Activity 2.Layout xml code activity_scrolling.xml 1 <?xml version"1.0" encoding"utf-8"?>2 <android.support.design.widget.CoordinatorLayout xmlns:android"http://schemas.android.com/apk/res/an…

截取utf8中文字符串

英文直接截取即可。 中文应字节长度会乱码&#xff0c;应先转unicode截取。 如下&#xff1a; #-*- coding:utf8 -*- s u截取中文 s.decode(utf8)[0:3].encode(utf8)转载于:https://www.cnblogs.com/BigFishFly/p/6337183.html

解决:Navicat for mysql 设置外键出错

1 看下是不是外键允许为空&#xff0c;不唯一等约束条件不满足 2 或者外键设置删除时为 restrict 1. 两个字段的类型或者大小不严格匹配。例如&#xff0c;如果一个是int(10)&#xff0c;那么外键也必须设置成int(10)&#xff0c;而不是int(11)&#xff0c;也不能是tinyint。另…

Python加盐加密方法hashlib(md5,sha224,sha1,sha256)

用random.randint随机数给密码加,盐加强密码的安全性

Ubuntu16.04以root身份登入!

首先以非root用户身份登入系统。 1&#xff0c;修改root密码&#xff1a;启动shell&#xff0c;随后在shell里面输入命令&#xff1a; sudo passwd root 最后输入root要使用的密码&#xff0c;需要输入两次&#xff0c;这样root密码就修改完毕了&#xff01; 2&#xff0c;修改…

HDU2193-AVL-数据结构-AVL

题目链接&#xff1a;http://acm.hdu.edu.cn/statistic.php?pid2193&from126&lang&order_type0 好吧。水题一道&#xff0c;原本以为是一道写AVL树的想写来练练手。没有想到却是这样一道水题&#xff0c;好吧&#xff0c;猥琐的水过。 题目意思&#xff1a; 题目大…

玩Linux碰到的问题以及使用技巧总结

文章目录1、问题问题一&#xff1a;解压JDK报错&#xff1a;gzip:stdin:not in gzip format。 问题二&#xff1a;在Linux下ping不通外网 问题三&#xff1a;解决虚拟机克隆后网卡eth0不见的问题 问题四&#xff1a;执行脚本报错&#xff1a;syntax error: unexpected end of f…

python连接MySQL数据库搭建简易博客

实现功能大概 将python和MySQL数据库交互进行 封装 ---》》utils.py 文件程序 ----》blog.py # -*- coding: utf-8 -*- # Time : 2019/08/30 15:33 # Author : Liu # File : utils.pyimport pymysql import hashlibclass dbHelper:def __init__(self, host, user, pass…

利用Sqoop在数据库和Hive、HDFS之间做ETL操作

文章目录[toc] 目录&#xff1a;一、利用Sqoop&#xff0c;从Oracle到HDFS二、利用Sqoop&#xff0c;从Oracle到Hive三、遇到的问题目录&#xff1a; 一、利用Sqoop&#xff0c;从Oracle到HDFS 第一步&#xff1a;把Oracle驱动拷贝到Sqoop安装路径中的lib文件夹下。 第二步&…

跨地域的VPC私网互通【高速通道案例】

最近一家大型企业正在将业务迁移至阿里云平台&#xff0c;用户有深圳&#xff0c;北京&#xff0c;上海等分支&#xff0c;其中上海为总部&#xff0c;用户要求在阿里云上的华南1&#xff0c;华北2&#xff0c;华东2分别建立VPC网络&#xff0c;其中华南1&#xff0c;华北2要与…

HDU 1711 Number Sequence(KMP模板)

http://acm.hdu.edu.cn/showproblem.php?pid1711 这道题就是一个KMP模板。 1 #include<iostream> 2 #include<cstring>3 using namespace std;4 5 const int maxn 10000005;6 7 int n,m;8 9 int next[maxn]; 10 int a[maxn], b[maxn]; 11 12 void get_next() 13…

Redis数据库学习笔记

一、NoSql&#xff08;非关系型数据库&#xff09; NoSQL&#xff1a;NoSQL Not Only SQL 非关系型数据库 ​ NoSQL&#xff0c;泛指非关系型的数据库。随着互联网web2.0网站的兴起&#xff0c;传统的关系数据库在应付web2.0网站&#xff0c;特别是超大规模和高并发的SNS类型…

Sqoop的安装配置及工作机制

文章目录[toc] 目录&#xff1a;1、简介2、sqoop安装2.1、下载并解压2.2、修改配置文件2.3、加入mysql或oracle的jdbc驱动包2.4、验证启动3、Sqoop的原理3.1、代码定制目录&#xff1a; 1、简介 sqoop是apache旗下一款“Hadoop和关系数据库服务器之间传送数据”的工具。 导入…

3D打印技术在医疗领域能做些什么?帮助精确完成手术

3D打印技术出现在20世纪90年代中期。它与普通打印工作原理基本相同&#xff0c;打印机内装有液体或粉末等“打印材料”&#xff0c;与电脑连接后&#xff0c;通过电脑控制把“打印材料”一层层叠加起来&#xff0c;最终把计算机上的蓝图变成实物。这打印技术称为3D立体打印技术…