Vue, into the pit

Parent component passes parameters to child component

Writes the attribute name and value

This is what the parent component should write

This is the value of the child component:

this.$parent.secondLevelId1;Copy the code

2. Vue route parameter transmission

Similar to get pass parameters, displayed in the address bar

The value can be var id = this.$route.query.id;

that.$router.push({
    name:"list",
    query:{
        vehicle:that.vehicle,
        name:name,
        econdLevelId:id
    }
});Copy the code

Similar to post, do not display in the address bar

this.$route.params.vehicleCopy the code

that.$router.push({
    name:"list",
    params:{
        id:id,
    }
});Copy the code

Take with what you pass

// String <router-link to="apple"> to apple</router-link> // object <router-link :to="{path:'apple'}"> to apple</router-link> // Named route <router-link :to="{name: 'applename'}"> to apple</router-link> color=red <router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link> color=red <router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link> // Direct route params, params does not take effect, if path is provided, params is ignored <router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link> // Named route params, address bar is /apple/red <router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>Copy the code

3. Set title to jump to the top of the page

index.js

{
    path: '/helpCenter',
    component: helpCenter,
    children: [
        {path:'/', component:hlepIndex, meta: {title: 'Help Center'}},
        {path: 'lumai', component: lumai, meta: {title: 'Help Center - About Lumai'}},
        {path: 'refabrication', component: refabrication, meta: {title: 'Help Center'}},
        {path: 'contact', component: contact, meta: {title: 'Help Centre - Contact Details'}}},Copy the code

main.js

Route. beforeEach((to, from, next) => {/* Route changes Modify page title */if(to.meta. Title) {document.title = to.meta. Title} // Different browsers // Chrome document.body. ScrollTop = 0 // Firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset = 0 next() })Copy the code

Style scoped// available in current file, not available in other filesCopy the code

Four, jump page anchor point

const scrollBehavior = function (to, from, savedPosition) {
    if (to.hash) {
        return{// Use the value of to.hash to find the corresponding element selector: to.hash}}};Copy the code

5. Slow first loading

{
    path: '/',
    name: 'HelloWorld',
    component: resolve=>require(['@/components/HelloWorld'],resolve),
},Copy the code

component: resolve=>require(['@/components/HelloWorld'],resolve),Copy the code

Six, volume

function getImageSizeInBytes(imgURL) {
    var request = new XMLHttpRequest();
    request.open("HEAD", imgURL, false);
    request.send(null);
    var headerText = request.getAllResponseHeaders();
    var re = /Content\-Length\s*:\s*(\d+)/i;
    re.exec(headerText);
    return parseInt(RegExp.The $1);
  }
    
  var picLink = "http://www.remanshop.com/group1/M00/00/04/rBN8UFy0HICAehxhAE7vncwn03Q875.jpg";
  var size = this.getImageSizeInBytes(picLink);
  var size_image = size / 1024/1024;Copy the code

Less global variable of VUE-cli3

Vue add style-resources-loader selects the desired preprocessor

pluginOptions: {    
    'style-resources-loader': {       
        preProcessor: 'less',        
        patterns: [            
            path.resolve(__dirname,'src/assets/css/public.less'),]}},Copy the code

Remove the console after packing

In webpack.prod.config.js –>UglifyJsPlugin–> add

warnings: false,
drop_debugger: true,
drop_console: true

Copy the code

vue-cli3

npm install terser-webpack-plugin -Dvue.config.jsconfigureWebpack: (config)=>{
    if(process.env.NODE_ENV === 'production'){
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true}}Copy the code

9. Remove the packed. Map file

The config/index. Js Settings

productionSourceMap: false.Copy the code

Add a CSS prefix

npm i postcss-loader autoprefixer -DCopy the code