Vue 获取url传参 及 $OPTIONS 讲解

js获取url参数有两种情况：

一、应用场景一：内部页面之间互相传值

假如要从A页面跳转到B页面，

this.$router.push({path:"/B",query:{
    Id : this.tId ,
    ...
}})

进入B页面之后，

this.Id = this.$route.query.Id;

就能将A页面的id传入B页面，进行参数获取。

二、应用场景二：外系统跳转Vue项目时自带参数

例如: https://shq5785.blog.csdn.net/list?Id=sunhuaqiang1#/

外系统跳转进入的url会在Vue项目编译后自动添加 “#/”后缀 ，其中带的参数在 “#/”之前，所以应用场景一中的方法无法获取，只能应用JS的方法来获取，解析功能函数如下所示：

getURLParams(url) {
    let param = url.split('#')[0];           //获取#/之前的字符串
    var paramContent = param.split('?')[1];  //获取?之后的参数字符串
    var paramsArray = paramContent.split('&');    //参数字符串分割为数组
    var paramResult = {};
    //遍历数组，拿到json对象
    paramsArray.forEach((item, index, paramsArray) => {
		paramResult[paramsArray[index].split('=')[0]] = paramsArray[index].split('=')[1];
    })
    return paramResult;
}

调用方式如下：

this.getURLParams(window.location.href)

三、拓展阅读

• 《Vue进阶（幺叁捌）：vue路由传参的几种基本方式》
• 《Vue进阶（二十六）：详解router.push()》
• 《ReactNative进阶（四十六）：页面跳转及传参》

一、前言

vue实例属性$options用来获取定义在data外的数据和方法。

应用示例如下：

<script>
export default {
  name: "optionsTest",
  data() {
    return {
    };
  },
  //在data外面定义的属性和方法通过$options可以获取和调用
  name: "CSDN",
  age: 12,
  testMethod() {
    console.log("shq5785");
  },
  created() {  
    console.log(this.$options.name);  // CSDN
    console.log(this.$options.age);  //12
    this.$options.testMethod();  // shq5785
  
  },
</script>

二、拓展阅读

• 《Vue系列》