vue如何在地址默认加后缀

效果如输入
http://zhengxie.imlimit.com
浏览器自动生成为
http://zhengxie.imlimit.com/nationwide/

mian.js

import Vue from "vue";
import App from "./App";
import router from "./router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import VueQuillEditor from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";
import "quill/dist/quill.bubble.css";
const hls = require("videojs-contrib-hls")

Vue.use(hls)
import {
  getTitle,
  getProvince
} from "@/api/common";
Vue.use(VueQuillEditor);
Vue.use(ElementUI);
router.beforeEach((to, from, next) => {
  getTitle().then(res => {
    if (to.name == "index" || !to.meta) {
      document.title = res.title;
    } else if (to.meta.title) {
      document.title = to.meta.title + "-" + res.title;
    }
    if (to.name == "registration") {
      const title = localStorage.getItem("province") ?
        localStorage.getItem("province") + "网上报名" :
        "全国网上报名";
      document.title = title + "-" + res.title;
    }
    document
      .querySelector('meta[name="keywords"]')
      .setAttribute("content", res.keywords);
    document
      .querySelector('meta[name="description"]')
      .setAttribute("content", res.description);
  });
  let pinYin = 'nationwide'
  // console.log(from)
  if (from.path == '/') {
    pinYin = to.params.pinYin ? to.params.pinYin : 'nationwide'
  } else {
    pinYin = from.params.pinYin ? from.params.pinYin : 'nationwide'
  }
  if (pinYin != localStorage.getItem("pinYin") && pinYin != 'nationwide') {
    if (pinYin) {
      getProvince().then(res => {
        localStorage.setItem("pinYin", pinYin);
        let status = false;
        for (const item of res) {
          if (item.pinYin == pinYin) {
            localStorage.setItem("province", item.value);
            status = true;
          }
        }
        if (!status) {
          router.push({
            path: '/' + pinYin + "/four",
            params: {
              pinYin: pinYin
            }
          });
          return;
        } else {
          if (to.path == '/' + to.params.pinYin || to.path == '/') {
            let path = to.path
            if (from.path == '/' && (to.matched.length === 0 || to.matched[0].path == '/:pinYin')) {
              path = '/'
            }
            next({
              path: '/' + pinYin + path,
              query: to.query,
              params: {
                pinYin: pinYin
              }
            });
            return
          }
          next();
        }
      });
      return
    } else {
      localStorage.removeItem("province");
    }
  } else if (pinYin == 'nationwide') {
    localStorage.removeItem("province");
    localStorage.removeItem("pinYin");
  }
  // console.log(to)
  if (to.path == '/' + to.params.pinYin || to.path == '/') {
    let path = to.path
    if (from.path == '/' && (to.matched.length === 0 || to.matched[0].path == '/:pinYin')) {
      path = '/'
    }
    next({
      path: '/' + pinYin + path,
      query: to.query,
      params: {
        pinYin: pinYin
      }
    });
    return
  }
  // console.log(1)
  next();
});
Vue.prototype.imgUrl = function (e) {
  if (!e) {
    return "";
  } else if (e.substring(0, 4) != "http") {
    return "http://ambcdn.eduugo.com" + e;
  } else {
    return e;
  }
};
Vue.prototype.path = function (e) {
  const pinYin = localStorage.getItem("pinYin") ? localStorage.getItem("pinYin") : 'nationwide'
  return '/' + pinYin + e
};
new Vue({
  el: "#app",
  router,
  components: {
    App
  },
  template: "<App/>"
});

router.js

import Vue from "vue";
import Router from "vue-router";


const index = () => import("@/page/index.vue");
const personal = () => import("@/page/personal.vue");
const login = () => import("@/page/login.vue");
Vue.use(Router);
export default new Router({
  mode: "history",
  routes: [{
      path: "/:pinYin/",
      name: "index",
      meta: {
        title: "模拟政协",
        keepalive: true
      },
      component: index
    },
 
	  {
		  path: "/:pinYin/vcd/:id",
		  name: "vcd",
		  meta: {
			  title: "视频详情"
		  },
		  component: ()=>import('../page/vcd')
	  }
  ],
  scrollBehavior(to, from, savedPosition) {
    // savedPosition 会在你使用浏览器前进或后退按钮时候生效
    // 这个跟你使用 router.go() 或 router.back() 效果一致
    // 这也是为什么我在 tab 栏结构中放入了一个 点击回退 的按钮
    if (savedPosition) {
      return savedPosition;
    } else {
      // 如果不是通过上述行为切换组件,就会让页面回到顶部
      return {
        x: 0,
        y: 0
      };
    }
  }
});

vue项目中,引用文件时省略文件后缀的好处在于增代码的可读性和简洁性,并且提供更好的扩展性。 首先,省略文件后缀可以让代码更简洁易读。在编写代码时,我们可以直接使用文件的名称来引用,而无需关注具体的文件类型。这样一来,代码行数就会减少,同时也减少了阅读和维护代码所需要的时间和精力。此外,由于文件后缀可以隐藏起来,代码结构也更清晰。在查看代码时,可以更快地定位到所需的文件,提高了开发效率。 其次,省略文件后缀的引用方式有助于项目的扩展性。项目中的文件可能会不断地修改和更新,如果每次修改文件类型或者新增文件时还要修改引用的地方,将会增工作量和出错的可能性。而通过省略文件后缀,我们可以灵活地修改文件类型而不用担心引用处的代码需要修改,提高了代码的可维护性和扩展性。 最后,省略文件后缀也符合一些前端框架的约定。在一些前端开发框架中,文件后缀默认为一些特定的类型,例如.vue,.js,.css等。在这些框架中,如果文件后缀被省略,开发者可以更集中地关注于开发功能,而无需再关注文件类型的一致性。 综上所述,vue项目引用文件省略后缀的好处主要体现在代码的可读性、简洁性和项目的扩展性上。这种引用方式能够简化代码,提高代码的可维护性和开发效率,同时也符合一些前端框架的约定。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值