vue router页面跳转与传值取值

记录在学习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浏览器里面的插件，挺好用的，不用翻墙去谷歌商店下载。

来源：CSDN

作者：自酌一杯酒

链接：https://blog.csdn.net/struggleThunder/article/details/103682377