每日进步一点点

今日励志语：目标的坚定是性格中最必要的力量泉源之一，也是成功的利器之一。没有它，天才也会在矛盾无定的迷径中，徒劳无功

今日知识点：vue-router-属性to
to属性可以写很多种形式的路径。
例如：
to="/article" 静态的to属性
:to="{path:’/article’,query:{id:101}}" === to="/article?id=101"
:to="{name:‘article’,params:{articleId:101}}" === to="/article/101"
路由规则的名称 {name:‘article’, path: ‘/article/:articleId’, component: Article}
代码演示：

    // 参数方式：键值对 /article?id=101
    const List = {
      data () {
        return {
          id: 10010
        }
      },
      template: `<div>
         <h1>列表</h1>
         <!--<router-link to="/article?id=101">键值对传参</router-link>-->
         <!--<router-link :to="'/article?id='+id">键值对传参</router-link>-->
         <router-link :to="{path:'/article',query:{articleId:id}}">键值对传参</router-link>
       </div>`
    }
    const Item = {
      // $route vue实例下的数据，代表路由信息对象，例如传参信息
      // 获取键值对传参 $route.query
      template: `<div>
         <h1>选项 {{$route.query.articleId}}</h1>
       </div>`
    }
​
    const router = new VueRouter({
      routes: [
        {path: '/', component: List},
        {path: '/article', component: Item}
      ]
    })
路径上
// 参数方式：路径上 /article/101
      const List = {
      data () {
        return {
          id: 10010
        }
      },
      template: `<div>
         <h1>列表</h1>
         <!--<router-link to="/article/10010">路径上传参</router-link>-->
         <!--<router-link :to="'/article/'+id">路径上传参</router-link>-->
         <router-link :to="{name:'article',params:{id:id}}">路径上传参</router-link>
       </div>`
    }
    const Item = {
      template: `<div>
         <h1>选项 {{$route.params.id}}</h1>
       </div>`
    }
​
    const router = new VueRouter({
      routes: [
        {path: '/', component: List},
        {name:'article', path: '/article/:id', component: Item}
      ]
    })

总结：
怎么样通过to属性的对象写法，传递键值对参数 获取 $route.query
怎么样通过to属性的对象写法，传递路径上参数 获取 $route.params

今日面试题：avascript 中的垃圾回收机制
答：在 Javascript 中，如果一个对象不再被引用，那么这个对象就会被 GC 回收。
如果两个对象互相引用，而不再被第 3 者所引用，那么这两个互相引用的对象也会被回
收。因为函数 a 被 b 引用，b 又被 a 外的 c 引用，这就是为什么 函数 a 执行后不会被回
收的原因。