vue vue-router 使用注意事项
1、$router和$route区别
this.$router
访问路由器,实现路由的跳转等功能。
this.$route 实现访问当前路由,$route.query
(如果 URL 中有查询参数)。如:
export default {
computed: {
username () {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}
2、响应路由的变化,watch $route对象
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
注意:是监测路由参数变化如/user/foo
导航到 /user/bar,路由的变化时监测不到的。
同理beforeRouteUpdate
也仅仅监测路由参数变化。beforeRouteEnter
守卫 不能 访问 this
,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
3、编程式导航
// 字符串
router.push('home') // 对象
router.push({ path: 'home' }) // 命名的路由,变成 /user/123
router.push({ name: 'user', params: { userId: 123 }})
router.push({ path: `/user/${userId}` }) // -> /user/123
// 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
4、$route 对象
https://router.vuejs.org/zh/api/#路由对象属性
主要使用的$route.query。获取查询参数。
vue vue-router 使用注意事项的更多相关文章
- 使用vue实现简单的待办事项
待办事项 效果图 目录结构 详细代码 AddNew.vue <template> <div> <input v-model="content"/> ...
- 三、vue之router
三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
- 四 Vue学习 router学习
index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...
- vue 中router.go;router.push和router.replace的区别
vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...
- 【vue】 router.beforeEach
import store from '@/store' const Vue = require('vue') const Router = require('vue-router') Vue.use( ...
- vue & this.$router.resolve
vue & this.$router.resolve gotoAutoUpdate (query = {}) { const { href } = this.$router.resolve({ ...
- vue & vue router & dynamic router
vue & vue router & dynamic router https://router.vuejs.org/guide/essentials/dynamic-matching ...
- vue & vue router & match bug
vue & vue router & match bug match bugs solution name must be router https://stackoverflow.c ...
- Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...
随机推荐
- div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- poj 2262 筛法求素数(巧妙利用数组下标!)
Goldbach's Conjecture Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 41582 Accepted: ...
- nyoj 1007 GCD(数学题 欧拉函数的应用)
GCD 描述 The greatest common divisor GCD(a,b) of two positive integers a and b,sometimes written (a,b) ...
- eclipse汉化 adt汉化
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha
- 背包系列练习及总结(hud 2602 && hdu 2844 Coins && hdu 2159 && poj 1170 Shopping Offers && hdu 3092 Least common multiple && poj 1015 Jury Compromise)
作为一个oier,以及大学acm党背包是必不可少的一部分.好久没做背包类动规了.久违地练习下-.- dd__engi的背包九讲:http://love-oriented.com/pack/ 鸣谢htt ...
- 洛谷 P3943 星空
题目背景 命运偷走如果只留下结果, 时间偷走初衷只留下了苦衷. 你来过,然后你走后,只留下星空. 题目描述 逃不掉的那一天还是来了,小 F 看着夜空发呆. 天上空荡荡的,没有一颗星星——大概是因为天上 ...
- 【置换群】【枚举约数】hdu6038 Function
把b数组的所有置换群求出来,用数组记录一下每个大小所出现的次数. 然后求a的置换群,对每个置换群求能被其整除的b的置换群的大小总和(只有这些才能满足构造出一个f,且不自相矛盾),然后把它们全都乘起来就 ...
- 【计算几何】【预处理】【枚举】Urozero Autumn Training Camp 2016 Day 5: NWERC-2016 Problem K. Kiwi Trees
发现由于角的度数和边的长度有限制,那俩圆如果放得下的话,必然是塞在两个角里. 于是预处理n个圆心的位置(注意要判断那个圆会不会和其他的边界相交),然后n^2枚举俩角即可. #include<cs ...
- javaWeb中的JDBC学习入门
学习引荐地址:https://www.cnblogs.com/xdp-gacl/p/3946207.html 一.JDBC的相关概念介绍 1.1 数据库驱动 其实就好比我们平时使用到的独立声卡.网卡之 ...
- SpringBoot 整合 Jpa
项目目录结构 pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...