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 使用注意事项的更多相关文章

  1. 使用vue实现简单的待办事项

    待办事项 效果图 目录结构 详细代码 AddNew.vue <template> <div> <input v-model="content"/> ...

  2. 三、vue之router

    三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...

  3. Vue中router两种传参方式

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

  4. 四 Vue学习 router学习

    index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...

  5. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  6. 【vue】 router.beforeEach

    import store from '@/store' const Vue = require('vue') const Router = require('vue-router') Vue.use( ...

  7. vue & this.$router.resolve

    vue & this.$router.resolve gotoAutoUpdate (query = {}) { const { href } = this.$router.resolve({ ...

  8. vue & vue router & dynamic router

    vue & vue router & dynamic router https://router.vuejs.org/guide/essentials/dynamic-matching ...

  9. vue & vue router & match bug

    vue & vue router & match bug match bugs solution name must be router https://stackoverflow.c ...

  10. Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)

    文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...

随机推荐

  1. div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  2. poj 2262 筛法求素数(巧妙利用数组下标!)

    Goldbach's Conjecture Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 41582   Accepted: ...

  3. nyoj 1007 GCD(数学题 欧拉函数的应用)

    GCD 描述 The greatest common divisor GCD(a,b) of two positive integers a and b,sometimes written (a,b) ...

  4. eclipse汉化 adt汉化

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha

  5. 背包系列练习及总结(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 ...

  6. 洛谷 P3943 星空

    题目背景 命运偷走如果只留下结果, 时间偷走初衷只留下了苦衷. 你来过,然后你走后,只留下星空. 题目描述 逃不掉的那一天还是来了,小 F 看着夜空发呆. 天上空荡荡的,没有一颗星星——大概是因为天上 ...

  7. 【置换群】【枚举约数】hdu6038 Function

    把b数组的所有置换群求出来,用数组记录一下每个大小所出现的次数. 然后求a的置换群,对每个置换群求能被其整除的b的置换群的大小总和(只有这些才能满足构造出一个f,且不自相矛盾),然后把它们全都乘起来就 ...

  8. 【计算几何】【预处理】【枚举】Urozero Autumn Training Camp 2016 Day 5: NWERC-2016 Problem K. Kiwi Trees

    发现由于角的度数和边的长度有限制,那俩圆如果放得下的话,必然是塞在两个角里. 于是预处理n个圆心的位置(注意要判断那个圆会不会和其他的边界相交),然后n^2枚举俩角即可. #include<cs ...

  9. javaWeb中的JDBC学习入门

    学习引荐地址:https://www.cnblogs.com/xdp-gacl/p/3946207.html 一.JDBC的相关概念介绍 1.1 数据库驱动 其实就好比我们平时使用到的独立声卡.网卡之 ...

  10. SpringBoot 整合 Jpa

    项目目录结构 pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...