VUE脚手架router 解决传参不刷新，刷新跳转替换，钩子函数，路由元信息

1.解决传参不刷新方式：

App.vue 界面

3.钩子函数案例：

App.vue界面：

VipPage.vue界面：

4.路由元信息：

在router下的index.js配置路由元信息：

import Vue from 'vue'

import VueRouter from 'vue-router'

import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [

  {

    path: '/',

    name: 'home',

    component: HomeView

  },

  {

    path: '/about',

    name: 'about',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

  },{

    path:'/AboutPage',

    name:'aboutpage',

    component:()=>import('@/views/AboutPage.vue'),

    /* 局部路由钩子 */

   beforeEnter: (to, from, next) => {

     console.log(to);

     console.log(from);

     next()

   }

  {

    path:'/meta',

    name:'metapage',

    component:()=>import('@/views/MetaPage.vue'),

    meta:{

      title:'路由元信息',

      flag:true

    }

  }

]

MetaPage.vue文件：

左侧文件目录：