new VueRouter({
    base: '/app/',
    ...
  });

//前端設置
module.exports = {
  // publicPath默認值是'/'，即你的應用是被部署在一個域名的根路徑上
  // 設置為'./'，可以避免打包后的靜態(tài)頁面空白
  // 當在非本地環(huán)境時，這里以項目test為例，即打包后的h5項目部署服務器的test目錄下
  // 那么這里就要把publicPath設置為/test/，表示所有的靜態(tài)資源都在/test/里
  // 打包部署后，會發(fā)現index.html引用的靜態(tài)資源都添加了路徑/test/
  publicPath: process.env.NODE_ENV == 'development' ? './' : '/test/',
  ......
}
///服務端設置
location /test{
  ...
  try_files $uri $uri/ /test/index.html 
  //location /test表示項目部署在了 /test目錄下，這里要跟vue.config.js里的publicpath的值保持一致。
之所以刷新頁面白屏，其實是因為路由資源不存在
}

new Router({
    ...
    routes: [
        {
            path: '/',
            component: () => import('.iews/Index'),
            name: "home",
            children: [
                { path: '/home', name: "home", meta: { title: '管理' }, component: () => import('.src/home/Index') },
            ]
        },
        {
        path: string,//路由路徑
        component: Component, // 當前路由匹配時顯示的路由組件
        name: string, // 命名路由
        redirect: string | Location | Function, // 路由重定向
        props: boolean | Object | Function,  //路由傳參
        alias: string | Array<string>, // 路由別名
        children: Array<RouteConfig>, // 嵌套路由
        beforeEnter: (to: Route, from: Route, next: Function) => void, //路由守衛(wèi)
        caseSensitive: boolean, // 匹配規(guī)則是否大小寫敏感？(默認值：false)
      }
        }
    ]
})

{ // 二級路由
    path: 'message',
    component: Message,
    children: [
        { // 三級路由
            name: 'detail',
            path: 'details/:id/:title/:desc', // 配置占位符
            component: Details,
            props(route){ // router每次調的時候會把 $route 傳進來，你想怎么取就怎么??！
                return {
                    id: route.params.id,
                    title: route.params.title,
                    desc: route.params.desc
                }
            }
            // es6解構賦值寫法更簡單
            //props({query: {id, title, desc}}){
            //    return {id, title, desc}
            //}
        }
    ]
}

new VueRouter({
    ...
    scrollBehavior() {
      return { x: 0, y: 0 };
    },
  });

//在頁面離開時記錄滾動位置
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },
//進入該頁面時，用之前保存的滾動位置賦值
beforeRouteEnter (to, from, next) {
    next(vm => {
      document.body.scrollTop = vm.scrollTop
    })
  },

//App.vue
<template>
  <div id="app">
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>
//router.js
 routes: [
    {
      path: '/',
      name: 'List',
      component: () => import('./list.vue'),
      meta: {
        keepAlive: true // 需要緩存
      }
    },
    {
      path: '/content/:contentId',
      name: 'content',
      component: () => import('./content.vue'),
      meta: {
        keepAlive: false // 不需要緩存
      }
    },
]