欢迎访问我的 个人博客
记录在学习vue的时候遇到的一些问题
一、页面跳转与传值
1、使用<router-link>
标签的形式
<router-link to="/home/recommend">推荐</router-link>
<router-link :to="{name: 'list',params:{pagename: '新闻列表'}}">新闻列表</router-link>
<router-link :to="{path: '/home/user', query: {pagename: '个人中心'}}">个人中心</router-link>
需要注意的地方
-
<router-link>
标签被编译后是个<a>
标签,会有<a>
标签的一些默认样式。 -
name 参数后面的值是 router 文件夹里的 index.js 自己定义的 name 值 要保持一致
-
使用 name 跳转,只能用 params 来传递键值
-
path 参数后面的值是 接受的路径
-
使用 path 跳转,只能用 query 来传递键值
-
用 query 传值的方式,会将键值拼接在url地址栏上,使用 params 则不会
-
用 query 传值的方式,刷新页面参数不会消失,使用 params 则会消失
2、使用js方式跳转
methods: {
onDetials(index) {
/* 一、直接跳转 相当于window.location.href = url路径 */
this.$router.push('/details'); //不带参数直接跳转
this.$router.push({name: 'details', params: {idx: index}})
this.$router.push({path: '/details', query: {idx: index}});
/* 二、关闭当前页面跳转 相当于window.location.repalce(url路径)*/
this.$router.replace("/details"); //不带参数直接跳转
this.$router.replace({name: 'details', params: {idx: index}})
this.$router.replace({path: '/details', query: {idx: index}});
}
}
js跳转和使用
router-link
标签的形式跳转传递的参数和值都是一样的,需注意的地方也相同
返回上一页面
this.$router.go(-1);
this.$router.back();
二、页面取值
1、如果是用query传值,取值方式就是
this.$route.query.参数名
1、如果是用params传值,取值方式就是
this.$route.params.参数名
注意 取值是 $route ,后面没有r
三、安装浏览器扩展插件 Vue.js devtools
我用的是QQ浏览器里面的插件,挺好用的,不用翻墙去谷歌商店下载。