调整路由配置，优化页面

dependencies-cdn.js

@@ -3,7 +3,7 @@ module.exports = [
   { name: 'vue-i18n', library: 'VueI18n', js: 'https://cdn.jsdelivr.net/npm/vue-i18n@8.17.3/dist/vue-i18n.min.js', css: '' },
   { name: 'vue-router', library: 'VueRouter', js: 'https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js', css: '' },
   { name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', css: '' },
-  // { name: 'element-ui', library: 'ELEMENT', js: 'https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js', css: 'https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css' },
+  { name: 'element-ui', library: 'ELEMENT', js: 'https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js', css: 'https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css' },
   { name: 'js-cookie', library: 'Cookies', js: 'https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js', css: '' },
   // { name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' },
   // { name: 'brace/ext/language_tools', library: 'language_tools', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', css: '' },

package-lock.json

@@ -2143,6 +2143,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "http://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2224,6 +2232,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+    },
     "babel-loader": {
       "version": "8.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.1.0.tgz?cache=0&sync_timestamp=1584717315701&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.1.0.tgz",
@@ -2278,6 +2291,27 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.11.tgz",
+          "integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz?cache=0&sync_timestamp=1584052392667&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -3918,8 +3952,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
-      "dev": true
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4371,6 +4404,19 @@
       "integrity": "sha1-nQqS3v79p8wc+IlQWLiSeV3da0E=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.1.tgz",
+      "integrity": "sha1-DLGkXPJ6phxgHe++GSdArFy533w=",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.2",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.2.tgz",
@@ -8214,6 +8260,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnpm-run-path%2Fdownload%2Fnpm-run-path-2.0.2.tgz",
@@ -10038,6 +10089,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.17.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.17.0.tgz",
@@ -11378,6 +11434,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "http://registry.npm.taobao.org/through/download/through-2.3.8.tgz",

package.json

@@ -14,6 +14,8 @@
     "bulma": "^0.8.2",
     "clipboard-polyfill": "^2.8.6",
     "core-js": "^3.6.4",
+    "element-ui": "^2.13.1",
+    "js-base64": "^2.5.2",
     "js-cookie": "^2.2.1",
     "markdown-it": "^10.0.0",
     "node-sass": "^4.14.0",

src/layout/header-aside/components/header-color/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-color-picker
+    class="btn-text can-hover"
+    value="#363636"
+    :predefine="predefine"
+    size="mini"
+    />
+</template>
+
+<script>
+// import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'd2-header-color',
+  data () {
+    return {
+      predefine: [
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585',
+        '#363636'
+      ]
+    }
+  },
+  // computed: {
+  //   ...mapState('d2admin/color', [
+  //     'value'
+  //   ])
+  // },
+  watch: {
+    value (value) {
+      this.set(value)
+    }
+  },
+  // methods: {
+  //   ...mapActions('d2admin/color', [
+  //     'set'
+  //   ])
+  // }
+}
+</script>

src/main.js

@@ -1,5 +1,9 @@
 import Vue from 'vue'
 import App from './App.vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/color-picker.css'
+import 'element-ui/lib/theme-chalk/base.css'
+import 'element-ui/lib/theme-chalk/button.css'
 import axios from '@utils/axios'
 import VueAxios from 'vue-axios'
 import router from './router'
@@ -7,6 +11,7 @@ import i18n from './i18n'
 import "@/assets/style/theme/register.scss"
 
 Vue.config.productionTip = false
+Vue.use(ElementUI)
 Vue.use(VueAxios,axios)
 
 new Vue({

src/router/routes.js

@@ -1,11 +1,12 @@
 // 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
-const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
+const _import = require("@/libs/util.import." + process.env.NODE_ENV);
 
 const frameIn = [
-  { path: '/:id:(text/.*\\.)(html|php|css|go|java|py|js|json|txt|sh|md)', component: _import('page/GoText') },
+  { path: "/:id:(text)/:path", component: _import("page/GoText"), props: true },
-  { path: '/:id:(video/.*\\.)(mp4|webm|mkv)', component: _import('page/GoVideo') },
+  { path: "/:id:(pdf)/:path", component: _import("page/GoPdf"), props: true },
-  { path: '/:id:(image/.*\\.)(bmp|jpg|jpeg|png|gif)', component: _import('page/GoImg') },
+  { path: "/:id:(video)/:path", component: _import("page/GoVideo") },
-  { path: '/:id::cmd?(/?/??.*/)', component: _import('page/GoList') },
+  { path: "/:id:(image)/:path", component: _import("page/GoImg") },
-]
+  { path: "/:id::cmd?(/?/??.*/)", component: _import("page/GoList") },
+];
 
-export default frameIn
+export default frameIn;

src/utils/AcrouUtil.js

@@ -1,4 +1,5 @@
 import axios from "@utils/axios";
+let Base64 = require("js-base64").Base64;
 
 const exts = [
   "html",
@@ -23,17 +24,44 @@ const exts = [
 ];
 
 export const checkoutPath = (path, file) => {
-  // 解决/css这种也会匹配的问题
-  // var ext = path.split(".").length > 1 ? path.split(".").pop() : "";
-  // if (exts.indexOf(`${ext}`) >= 0) {
-  //   path += "?a=view";
-  // } else {
   if (file.mimeType === "application/vnd.google-apps.folder") {
     if (path.substr(-1) !== "/") {
       path += "/";
     }
   }
-  // }
+  return path;
+};
+
+export const checkView = (path) => {
+  let name = path.split("/").pop();
+  let ext = name
+    .split(".")
+    .pop()
+    .toLowerCase();
+  let base64Path = Base64.encode(path);
+  if ("|html|php|css|go|java|js|json|txt|sh|md|".indexOf(`|${ext}|`) >= 0) {
+    path = path.replace(/\/(\d+:)\/.*/, (p1, p2) => {
+      return `/${p2}text/${base64Path}`;
+    });
+  }
+
+  if ("|pdf|".indexOf(`|${ext}|`) >= 0) {
+    path = path.replace(/\/(\d+:)\/.*/, (p1, p2) => {
+      return `/${p2}pdf/${base64Path}`;
+    });
+  }
+
+  if ("|mp4|webm|mkv|".indexOf(`|${ext}|`) >= 0) {
+    path = path.replace(/\/(\d+:)\/.*/, (p1, p2) => {
+      return `/${p2}video/${base64Path}`;
+    });
+  }
+
+  if ("|bmp|jpg|jpeg|png|gif|".indexOf(`|${ext}|`) >= 0) {
+    path = path.replace(/\/(\d+:)\/.*/, (p1, p2) => {
+      return `/${p2}image/${base64Path}`;
+    });
+  }
   return path;
 };
 
@@ -59,6 +87,14 @@ export const getURLParameters = (url) =>
 
 //console.log(getQueryString("/Movies/xx.mp4?a=view&y=123", "y"));
 
+export const encode64 = (str) => {
+  return Base64.encode(str);
+};
+
+export const decode64 = (str) => {
+  return Base64.decode(str);
+};
+
 export function get_file(option, callback) {
   var path = option.path;
   var modifiedTime = option.file.modifiedTime;
@@ -139,3 +175,52 @@ export function formatFileSize(bytes) {
   }
   return bytes;
 }
+
+
+ /** 日期格式化
+ * @param {Number String Date} 
+ * @param {String} 'YYYY-MM-DD HH:mm:ss EEE' 年(Y)、月(M)、日(D)、12小时(h)、24小时(H)、分(m)、秒(s)、毫秒(S)、周(E)、季度(q)
+ * @return {String}
+ * @example XDate.format(new Date(), "YYYY-MM-DD") ==> 2017-08-23
+ */
+export function formatDate(date, fmt) {
+  fmt = fmt || 'YYYY-MM-DD HH:mm:ss';
+  if (typeof date === 'string') {
+      // date = new Date(date.replace(/-/g, '/'))
+      date = new Date(date)
+  }
+  if (typeof date === 'number') {
+      date = new Date(date)
+  }
+  var o = {
+      'M+': date.getMonth() + 1,
+      'D+': date.getDate(),
+      'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
+      'H+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() + 3) / 3),
+      'S': date.getMilliseconds()
+  }
+  var week = {
+      '0': '\u65e5',
+      '1': '\u4e00',
+      '2': '\u4e8c',
+      '3': '\u4e09',
+      '4': '\u56db',
+      '5': '\u4e94',
+      '6': '\u516d'
+  }
+  if (/(Y+)/.test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  if (/(E+)/.test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + ''])
+  }
+  for (var k in o) {
+      if (new RegExp('(' + k + ')').test(fmt)) {
+          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+      }
+  }
+  return fmt;
+}

src/views/Layout.vue

@@ -4,9 +4,9 @@
     <section class="section">
       <div class="container">
         <bread-crumb ref="breadcrumb"></bread-crumb>
-        <keep-alive>
+        <!-- <keep-alive> -->
           <router-view></router-view>
-        </keep-alive>
+        <!-- </keep-alive> -->
         <Footer></Footer>
       </div>
     </section>

src/views/common/BreadCrumb.vue

@@ -2,7 +2,7 @@
   <nav class="breadcrumb is-hidden-mobile is-hidden-touch" aria-label="breadcrumbs">
     <ul>
       <li>
-        <a v-show="navs && navs.length>0" @click="go(index)">{{$t('index')}}</a>
+        <a v-show="navs && navs.length>0" @click="go('/'+index+':/')">{{$t('index')}}</a>
       </li>
       <li
         v-for="(item,index) in navs"
@@ -17,7 +17,9 @@
 </template>
 
 <script>
+import { decode64 } from "@utils/AcrouUtil";
 export default {
+  props: ["name"],
   data: function() {
     return {
       navs: [],
@@ -28,9 +30,7 @@ export default {
     this.render();
   },
   watch: {
-    $route(to, from) {
+    $route: "render"
-      this.render();
-    }
   },
   methods: {
     go(path) {
@@ -39,8 +39,10 @@ export default {
       });
     },
     render() {
-      let path = window.location.pathname;
+      this.index = this.$route.params.id;
-      this.index = path.match("/\\d+:/")[0]
+      let path = this.$route.params.path
+        ? decode64(this.$route.params.path)
+        : this.$route.path;
       // 如果是搜索不进行渲染
       if (path.match("/[0-9]+:search")) {
         this.navs = [];

src/views/common/Footer.vue

@@ -7,7 +7,7 @@
             <a
               class="tag is-dark"
               href="https://github.com/Aicirou/goindex-theme-acrou"
-            >goindex-template-acrou</a>
+            >goindex-theme-acrou</a>
             <span class="tag is-light">
               MIT &nbsp;
               <i class="fab fa-github"></i>

src/views/common/Navbar.vue

@@ -56,6 +56,9 @@
           </div> -->
           <header-search />
           <header-locales />
+          <div class="navbar-item">
+            <header-color/>
+          </div>
           <a
             class="navbar-item"
             target="_blank"
@@ -74,10 +77,12 @@
 <script>
 import headerSearch from '@/layout/header-aside/components/header-search'
 import headerLocales from "@/layout/header-aside/components/header-locales";
+import headerColor from '@/layout/header-aside/components/header-color'
 export default {
   components: {
     headerSearch,
-    headerLocales
+    headerLocales,
+    headerColor
   },
   created() {
     if (window.gds && window.gds.length > 0) {

src/views/page/GoImg.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import { decode64 } from "@utils/AcrouUtil";
 export default {
   data: function() {
     return {
@@ -20,17 +21,17 @@ export default {
       display: false
     };
   },
-  watch: {
+  computed: {
-    $route(to, from) {
+    url() {
-      this.render();
+      return decode64(this.$route.params.path);
     }
   },
-  mounted() {
+  created() {
     this.render();
   },
   methods: {
     render() {
-      let path = window.location.pathname;
+      let path = this.url;
       // 便于开发环境调试
       path = process.env.NODE_ENV === "development" ? "/api" + path : "";
       this.imgurl = path;

src/views/page/GoList.vue

@@ -21,7 +21,7 @@
         </thead>
         <tbody>
           <tr v-for="(file,index) in files" v-bind:key="index">
-            <td @click="go(file)">
+            <td @click="go(file, 'view')">
               <svg class="iconfont" aria-hidden="true">
                 <use :xlink:href="getIcon(file.mimeType)" />
               </svg>
@@ -34,7 +34,11 @@
               v-if="file.mimeType!=='application/vnd.google-apps.folder'"
             >
               <span class="icon" @click.stop="copy(file.path)">
-                <i class="fa fa-copy faa-shake animated-hover" :title="$t('list.opt.copy')" aria-hidden="true"></i>
+                <i
+                  class="fa fa-copy faa-shake animated-hover"
+                  :title="$t('list.opt.copy')"
+                  aria-hidden="true"
+                ></i>
               </span>
               <span class="icon" @click.stop="go(file,'_blank')">
                 <i
@@ -65,7 +69,12 @@
 </template>
 
 <script>
-import { utc2beijing, formatFileSize, checkoutPath } from "@utils/AcrouUtil";
+import {
+  formatDate,
+  formatFileSize,
+  checkoutPath,
+  checkView
+} from "@utils/AcrouUtil";
 import axios from "@/utils/axios";
 import Markdown from "../common/Markdown";
 import * as clipboard from "clipboard-polyfill";
@@ -83,7 +92,7 @@ export default {
       },
       files: [],
       loading: true,
-      copyTooltip: '',
+      copyTooltip: "",
       icon: {
         "application/vnd.google-apps.folder": "icon-morenwenjianjia",
         "video/mp4": "icon-mp",
@@ -197,7 +206,7 @@ export default {
                 return {
                   path: p,
                   ...item,
-                  modifiedTime: utc2beijing(item.modifiedTime),
+                  modifiedTime: formatDate(item.modifiedTime),
                   size: formatFileSize(item.size)
                 };
               });
@@ -222,7 +231,6 @@ export default {
     },
     copy(path) {
       let origin = window.location.origin;
-      path = path.replace("?a=view", "");
       path = origin + path;
       clipboard.writeText(path);
     },
@@ -233,25 +241,25 @@ export default {
         return;
       }
       if (target === "down") {
-        path = path.replace("?a=view", "");
+        location.href = path;
-        window.open(path);
+        return;
+      }
+      if (target === "view") {
+        this.$router.push({
+          path: checkView(path)
+        });
+        return;
+      }
+      if (file.mimeType === "application/vnd.google-apps.folder") {
+        this.$router.push({
+          path: path
+        });
         return;
       }
       if (target === "_blank") {
         window.open(path);
-      } else {
+        return;
-        this.$router.push({
-          path: path
-        });
       }
-
-       /* else if (path.substr(-1) == "/" && path.indexOf("?a=view") > 0) {
-        this.$router.push({
-          path: path
-        });
-      } else {
-        location.href = path;
-      } */
     },
     goSearchResult(file, target) {
       this.loading = true;
@@ -288,8 +296,10 @@ export default {
       if (to.path.length < from.path.length) {
         this.page.page_token = null;
       }
+      if (to.path.substr(-1) === '/') {
 				this.render();
 			}
     }
+  }
 };
 </script>

src/views/page/GoPdf.vue

@@ -1,22 +1,29 @@
 <template>
-  <object :data="url" type="application/pdf" name="test.pdf">
+  <div>
+    <object :data="url" type="application/pdf" name="file.pdf">
       <embed :src="url" type="application/pdf" />
     </object>
+  </div>
 </template>
 
 <script>
+import { decode64 } from "@utils/AcrouUtil";
 export default {
   data: function() {
     return {};
   },
-  mounted() {},
+  computed: {
-  watch: {
+    url() {
-    $route: "render"
+      return decode64(this.$route.params.path);
+    }
   },
-  methods: {
+  methods: {}
-    render() {
-      let path = window.location.pathname;
-    }
-  }
 };
 </script>
+
+<style scoped>
+object{
+    width: 100%;
+    height: -webkit-fill-available;
+}
+</style>

src/views/page/GoText.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { get_file } from "@utils/AcrouUtil";
+import { get_file, decode64 } from "@utils/AcrouUtil";
 export default {
   data: function() {
     return {
@@ -21,22 +21,22 @@ export default {
       content: ""
     };
   },
-  watch: {
-    $route(to, from) {
-      this.render();
-    }
-  },
   created() {
     this.render();
   },
+  computed: {
+    url() {
+      return decode64(this.$route.params.path);
+    }
+  },
   components: {
     editor: require("@/components/ace-editor")
   },
   methods: {
     render() {
-      let path = window.location.pathname;
+      let path = this.url;
       this.content = this.$t("page.text.loading");
-      get_file({ path: path.replace("?a=view", "/"), file: {} }, data => {
+      get_file({ path: path, file: {} }, data => {
         this.content = data;
       });
     },

src/views/page/GoVideo.vue

@@ -54,6 +54,7 @@
 </template>
 
 <script>
+import { decode64 } from "@utils/AcrouUtil";
 export default {
   data: function() {
     return {
@@ -96,20 +97,18 @@ export default {
   methods: {
     render() {
       // 便于开发环境调试
-      this.videourl = window.location.origin + window.location.pathname;
+      this.videourl = window.location.origin + this.url;
       this.apiurl =
         "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
     }
   },
-  mounted() {
+  created() {
     this.render();
   },
-  watch: {
-    $route(to, from) {
-      this.render();
-    }
-  },
   computed: {
+    url() {
+      return decode64(this.$route.params.path);
+    },
     getThunder() {
       return Buffer.from("AA" + this.videourl + "ZZ").toString("base64");
     }