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

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

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, // 當(dāng)前路由匹配時(shí)顯示的路由組件
        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ī)則是否大小寫敏感？(默認(rèn)值：false)
      }
        }
    ]
})

{ // 二級(jí)路由
    path: 'message',
    component: Message,
    children: [
        { // 三級(jí)路由
            name: 'detail',
            path: 'details/:id/:title/:desc', // 配置占位符
            component: Details,
            props(route){ // router每次調(diào)的時(shí)候會(huì)把 $route 傳進(jìn)來(lái)，你想怎么取就怎么?。?
                return {
                    id: route.params.id,
                    title: route.params.title,
                    desc: route.params.desc
                }
            }
            // es6解構(gòu)賦值寫法更簡(jiǎn)單
            //props({query: {id, title, desc}}){
            //    return {id, title, desc}
            //}
        }
    ]
}

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

//在頁(yè)面離開(kāi)時(shí)記錄滾動(dòng)位置
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },
//進(jìn)入該頁(yè)面時(shí)，用之前保存的滾動(dòng)位置賦值
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 // 不需要緩存
      }
    },
]