vue学点笔记一

一、vue组件和插件的区别

vue组件组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。
插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。

简单来说，组件就是全局通过标签来用的，插件也就是公用方法。

组件
import Rule from '../../components/Rule.vue'
export default {
  components: {
    Rule,
  },
   data () {
    return {
    }
   }
}
插件
export default {
    install(Vue, options) {
        Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如:  vue-custom-element
            // 逻辑...
        }
 
        Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
            bind (el, binding, vnode, oldVnode) {
                // 逻辑...
            }
            ...
        })
    
        Vue.mixin({
            created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
                // 逻辑...
            }
            ...
        })    
    
        Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
            // 逻辑...
        }
    }
}

二、Vue.config.productionTip = true/false;

Vue.config.productionTip = true处于开发模式下，Vue提供了许多警告来帮助您解决常见的错误和陷阱。
Vue.config.productionTip = true处于生产模式下，这些提示变得无用，并且使应用程序的有效负载大小膨胀。所以没有这些提示。

三、路由中组件异步加载（按需加载）

在Vue项目中，一般使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：

import Hello from '@/components/Hello'
import Boy from '@/components/Boy'
import Girl from '@/components/Girl'

这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载。

• require.ensure()

 {
        path:'product',
        component: r => require.ensure([], () => r(require('../modules/index')), 'Index')
  }

第一个参数的依赖关系是一个数组，代表了当前需要进来的模块的一些依赖;
第二个参数回调就是一个回调函数其中需要注意的是，这个回调函数有一个参数要求，通过这个要求就可以在回调函数内动态引入其他模块值得注意的是，虽然这个要求是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则的的的的WebPack就无法静态分析的时候处理它;
第三个参数errorCallback比较好理解，就是处理错误的回调;
第四个参数chunkName则是指定打包的组块名称。

• () => import（）

 {
        path:'product',
        component:() => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
  }

/* webpackChunkName: "group-foo" */ 一个特殊的注释语法来提供 chunk name。如果不写chuck,这样做的结果是每个组件都会打包成一个js文件。

四、router和route的区别

• router为vueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。
• route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query等。

五、this.$route.query和this.$route.params的区别

1、this.$route.query

//跳转方法
this.$router.push({
    path: '/home',
    query: {
      id: 123
    }
 })
//路由配置
{
     path: '/home',
     name: 'home'//,可以不写name
     component: Home
 }
//获取参数
this.$route.query.id

2、this.$route.params

//跳转方法
this.$router.push({
    name: 'home',
    params: {
      id: 123
    }
 })
//路由配置
{
     path: '/home',
     name: 'home'//,必须写name
     component: Home
 }
//获取参数
this.$route.params.id

this.$route.params方法强制刷新页面，数据会丢失，但是浏览器路径参数是隐藏的
this.$route.query方法刷新页面，数据不会丢失，但是浏览器路径参数是显示的

3、动态路由的参数

//跳转方法
this.$router.push({
    path: `/particulars/${id}`,
 })
//路由配置
{
     path: '/home/:id',
     name: 'home',
     component: Home
   }
//获取参数
this.$route.params.id

这种方法页面刷新数据不会丢失

六、vueRouter中redirect（重定向）和alias（别名）区别

redirect：是直接改变了路径，把url变成了真实的path路径。
alias：URL路径没有被改变，这种情况更友好，让用户知道自己访问的路径。
redirect是我访问a,重定向成b。而alias是我访问b,b就定义在a的路由配置中``

{
  path:"a",
  name:"hone",
  component:Home,
  alias:"b"
}