现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。
父组件中：
<li v-for="article in articles" @click="getDescribe(article.id)">
methods：
方案一：
getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转
this.$router.push({ path: `/describe/${id}`,
})
方案一，需要对应路由配置如下：
{ path: '/describe/:id',
name: 'Describe',
component: Describe
}
很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。
this.$route.params.id
方案二：
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe',
params: { id: id }
})
对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
{ path: '/describe',
name: 'Describe',
component: Describe
}
子组件中: 这样来获取参数
this.$route.params.id
方案三：
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({
path: '/describe',
query: { id: id }
})
对应路由配置：
{
path: '/describe',
name: 'Describe',
component: Describe
}
对应子组件: 这样来获取参数
this.$route.query.id
这里要特别注意 在子组件中 获取参数的时候是
router 这很重要~~~
（https://github.com/vuejs/vue-...）
tips
可能上面少了this 会误导新手 直接使用 $route来获取，所以这边加上this
转自：cnblogs.com/plBlog/p/11815297.html
vue实现按回车键登录
首先在mounted中绑定监听事件
mounted(){
//绑定事件
window.addEventListener('keydown',this.keyDown);
}
在写一个监听事件的方法
methods:{
keyDown(e){
//如果是回车则执行登录方法
if(e.keyCode == 13){
this.login();
}
}
}
最后要销毁事件
destroyed(){
window.removeEventListener('keydown',this.keyDown,false);
}
转自：http://www.imooc.com/article/301401?block_id=tuijian_wz
当前页面 Vue如何获取当前页面的url,获取路由地址
获取路由：redirect: router.currentRoute.fullPath
完整url可以用 window.location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params 例如：/user/:id → /user/2044011030 → this.$route.params.id
路由查询参数 this.$route.query 例如：/user/search?name=sf → this.$route.query.name
encodeURIComponent,encodeURI的使用以及在vue中用url传值的两种方式
参考：https://www.runoob.com/jsref/jsref-decodeuricomponent.html
https://blog.csdn.net/wanwan5856/article/details/79616949
一、问题发生场景
在vue中使用$route的query传值方式会发现值被转为一串不易读的字符，但是不影响从query参数中获取正确的原始的传值，这本来并没有引起我的注意。后来产品提了一个需求是某个页面必须在新标签页打开，搜了下vue好像没有提供这种方法，但是用window.open('#/urlxxx?fdn=' + fdn + '&page=interface')
可以满足需求，只是期间遇到问题：
因为$route.query已经帮我们自动编码了，我们平时使用时只需要写参数和值就好，在这里我就失去了警惕，直接写上了键值对，结果vue route进行跳转时url出错url的参数会自动抹掉结果跳转在只有‘？’符号前的路径的页面。把参数值使用encodeURIComponent编码后就可以解决这个问题了。
二、引出两个知识点
1，vue中使用route的query取值也会自动解码。断定是encodeURIComponent而不是encodeURI的原因是我传的值里有“/”而实际地址栏里没有。
但是在vue中使用window.open()来实现url在新标签页打开传值取值时需要手动转码（当出现不合规范的字符时）。
2, vue为什么要自动进行编码呢？转义是为了符合url的规范，在标准的url规范中中文和很多的字符是不允许出现在url中的。如果我们的键值字符串中包含'&?='，服务端就无法准确解析我们的键值对了。
补充一下encodeURI/decodeURI和encodeURIComponent/decodeURIComponent的区别：
前者被设计来用于对完整URL进行URL Encode，于是URL中的功能字符，比如&, ?, /, =等等这些并不会被转义；而后者被设计来对一个URL中的值进行转义，会把这些功能字符也进行转义。
encodeURI: 不编码的符号是： A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( )
encodeURIComponent: 不编码的符号是：A-Z a-z 0-9 - _ . ! ~ * ' ( )
vue登录拦截登录后继续跳转指定页面
1.在需要拦截的页面的路由上加一个meta:
router.js
2.在这个beforeEach的钩子函数中拦截导航
main.js
3.登录页面，登录完成后，跳到指定页面或首页(如果没有路由拦截或携带路径参数的情况下)
login.vue
router.beforeEach((to, from, next) => { } 三个参数：
to：即将进入的下一个路由对象；
from：当前导航即将离开的路由；
next：(function函数) 调用next() 进行下一个钩子。
next() 无参 进行 下一个钩子函数；
next({ path:'/xxx' , query:{}}) 携带参数跳到xxx页面；
网友评论