vue2.X的路由
以 /
开头的嵌套路径会被当作根路径。
<router-link>
在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
vue2.X的路由的更多相关文章
- 【面试题】Vue2动态添加路由 router.addRoute()
Vue2动态添加路由 点击打开视频讲解更加详细 场景: 一般结合VueX和localstorage一起使用 router.addRoutes vue-router4后 已废弃:使用 router.ad ...
- Vue2.X的路由管理记录之 钩子函数(切割流水线)
$route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...
- vue2.0配置路由
配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...
- Vue2.X的路由管理记录之 钩子函数(切割流水线)2
$route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...
- Vue2.0实现路由
Vue2.0和1.0实现路由的方法有差别,现在我用Vue 2.0实现路由跳转,话不多说,直接上代码 HTML代码 <div class="tab"> <route ...
- (转)Vue2.X的路由管理记录之 钩子函数(切割流水线)
$route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化)它. 导航和钩子函数: 导航:路由正在发生改 ...
- vue2.0:(五)、路由vue-router
好的,接下来,我们来写路由.用的是vue2.0的路由. 步骤一:配置main.js import Vue from 'vue'; import App from './App'; import rou ...
- vue2.0 路由学习笔记
昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...
- Vue2.2版本学习小结
一.项目初始化继续参考这里 https://github.com/vuejs-templates/webpack-simple 或者 https://github.com/vuejs-template ...
随机推荐
- 如何将已有的本地Git 库推送到远端仓库?
以Github 为例 step 1. 在Github建立一个空的仓库 Step 2. 建立远端仓库的别名 >$ git remote add origin https://github.com/ ...
- MFC TabCtrl 控件修改标签尺寸
注意:无论那种方法,都要先设置Tab控件的Style属性为fixed width. 第一种方法 MFC,tabcontrol控件改变标签大小 - CSDN博客 https://blog.csdn.ne ...
- kaldi的TIMIT实例二
============================================================================ MonoPhone Training & ...
- leetcode144-先序遍历非递归实现
二叉树的先序/中序/后序遍历递归/非递归实现,讲的很清楚,其中后序遍历和先序中序的处理有些不一样: https://blog.yangx.site/2016/07/22/Python-binary-t ...
- web API简介(三):客户端储存之Web Storage API
概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...
- MySQL slow_log日志表出现非法字段值
背景 从mysql.slow_log 获取慢查询日志很慢,该表是csv表,没有索引. 想添加索引来加速访问,而csv引擎不能添加索引(csv引擎存储是以逗号分割的文本来存储的),只能改存储引擎来添加索 ...
- USB插入电脑的硬件检测和枚举流程
USB协议定义了设备的6种状态,仅在枚举过程种,设备就经历了4个状态的迁移:上电状态(Powered),默认状态(Default),地址状态(Address)和配置状态(Configured)(其他两 ...
- Python Web Service
搞移动端有段时间了,一直使用别人的API,自己也只写过ASP.NET网站作为网络服务,相对来讲是很大的短板.虽然ASP.NET可以提供想要的web服务,但是其体量臃肿,响应速度非常慢,这点我非常不喜欢 ...
- tomcat容器是如何创建servlet类实例?用到了什么原理?
当容器启动时,会读取在webapps目录下所有的web应用中的web.xml文件,然后对 xml文件进行解析,并读取servlet注册信息.然后,将每个应用中注册的servlet类都进行加载,并通过 ...
- 脚手架vue-cli系列一:安装与规范
我很喜欢Vue的一个重要原因就是因为它的vue-cli,这个工具可以让一个简单的命令行工具来帮助我快速地构建一个足以支撑实际项目开发的Vue环境,并不像Angular和React那样要在Yoman上找 ...