Very practical code collection for vue2.0 projects-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Very practical code collection for vue2.0 projects

php中世界最好的语言

Mar 08, 2018 am 09:31 AM

code use

这次给大家带来vue2.0的项目非常实用的代码集合，在项目中使用vue2.0的代码注意事项有哪些，下面就是实战案例，一起来看一下。

1、全局增加进度条提示
nprogress地址

// main.js 入口js文件
 import VueRouter from &#39;vue-router&#39;
 import NProgress from &#39;nprogress&#39;Vue.use(VueRouter); //注册路由插件NProgress.configure({ showSpinner: false }); //进度条配置router.beforeEach((to, from, next) => {
  NProgress.start();
})
router.afterEach(transition => {
  NProgress.done();
});

Copy after login

2、路由拦截

router.beforeEach((to, from, next) => {//假设登陆成功后，user信息保存在sessionStorage中。
  if (to.path == &#39;/login&#39;) {
    sessionStorage.removeItem(&#39;user&#39;);  //如果访问登录页，清空之前sessionStorage中的user信息
  }  let user = JSON.parse(sessionStorage.getItem(&#39;user&#39;));  if (!user && to.path != &#39;/login&#39;) {
    next({ path: &#39;/login&#39; })
  } else {
    next()
  }//如果访问非登陆页，判断是否有保存的user信息，如果没有，则判断为非法访问，重定向到登录页面})

Copy after login

3、路由切换动效

<!--app.vue 根组件--><template>
  <div id="app">
        <transition name="fade" mode="out-in">
        <router-view></router-view>
        </transition>
    </div></template><script>
  export default {      name: &#39;app&#39;,    components: {}
  }</script><style>
    .fade-enter-active,.fade-leave-active {        transition: opacity .2s ease;
    }    .fade-enter,.fade-leave-active {        opacity: 0;
    }</style>

Copy after login

4、路由嵌套

//router.jsimport a from &#39;a.vue&#39; import a from &#39;b.vue&#39; import a from &#39;c.vue&#39; import a from &#39;main.vue&#39; let routes = [
  {   path: &#39;/login&#39;,   component: a,   name: &#39;a&#39;},{     path: &#39;/&#39;,     component: main,     name: &#39;数据中心&#39;,     iconCls: &#39;iconfont icon-shuju&#39;, //假装有个icon图标
     children: [
            { path: &#39;/main/b&#39;, component: b, name: &#39;b&#39; },
            { path: &#39;/main/c&#39;, component: c, name: &#39;c&#39; },
        ]
    },
]export default routes;//main.js 入口js文件import routes from &#39;./routes
const router = new VueRouter({
  mode: &#39;history&#39;,
  routes
})
new Vue({
  el: &#39;#app&#39;,
  template: &#39;<App/>&#39;,
  router,
  components: { App }
}).$mount(&#39;#app&#39;)

Copy after login

ps：路由的配置，启动，挂载可以分别放在不同的页面。将模块化进行到底。routes对象，甚至可以来自于vuex，便于管理数据。如下例子：

//menus.js  属于vuex模块export default {  &#39;0&#39;: &#39;all&#39;,  &#39;2&#39;: &#39;breast&#39;,  &#39;3&#39;: &#39;leg&#39;,  &#39;4&#39;: &#39;face&#39;,  &#39;5&#39;: &#39;others&#39;,  &#39;6&#39;: &#39;buttocks&#39;,  &#39;7&#39;: &#39;stockings&#39;}//router.js 路由文件import menus from &#39;../store/menus&#39;; //引入const getRouters = () => {  return Object.keys(menus).map(key => {    return {      path: `/${menus[key]}/:page(\\d+)?`,      component: createListView(Number(key))
    }
  })
}export default new Router({  mode: &#39;history&#39;,  routes: [
        { path: &#39;a&#39;, component: a },
    ...getRouters()
  ]
})

Copy after login

5、全局过滤器
一个项目中，可能要用到很多过滤器来处理数据，多个组件公用的，可以注册全局过滤器。单个组件使用的，就挂载到实例filters中。
项目做的多了以后，可以整理一套常用的filters，不用反复的写。比如：时间等各种操作，数据格式转化，单位换算，部分数据的md5加密等...

//filters.js 过滤器文件export function formatDateTime (date) {    //格式化时间戳
  var y = date.getFullYear()  var m = date.getMonth() + 1
  m = m < 10 ? (&#39;0&#39; + m) : m  var d = date.getDate()
  d = d < 10 ? (&#39;0&#39; + d) : d  var h = date.getHours()  var minute = date.getMinutes()
  minute = minute < 10 ? (&#39;0&#39; + minute) : minute  return y + &#39;-&#39; + m + &#39;-&#39; + d + &#39; &#39; + h + &#39;:&#39; + minute
}export function test (a) {   return `${a}aaaa`}
......//main.js 入口js文件import Vue from &#39;vue&#39;import * as filters from &#39;./filters&#39;Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Copy after login

6、http拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供通用的处理方式。

axios实现-axios全攻略

// http request 拦截器axios.interceptors.request.use(    config => {        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }        return config;
    },
    err => {        return Promise.reject(err);
    });// http response 拦截器axios.interceptors.response.use(    response => {        return response;
    },
    error => {        if (error.response) {            switch (error.response.status) {                case 401:                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({                        path: &#39;login&#39;,                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }        return Promise.reject(error.response.data)   // 返回接口返回的错误信息
    });

Copy after login

vue-resource实现-vue-resource全攻略

Vue.http.interceptors.push((request, next) => {
　console.log(this)//此处this为请求所在页面的Vue实例
  // modify request
  request.method = &#39;POST&#39;;//在请求之前可以进行一些预处理和配置
  // continue to next interceptor　　next((response) => {//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断，就添加在此处，页面中任何一次http请求都会先调用此处方法
    　response.body = &#39;...&#39;;
　　　　return response;
  });
});

Copy after login

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Nordhold: Fusion System, Explained

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Clair Obscur: Expedition 33 - How To Get Perfect Chroma Catalysts

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1676

CakePHP Tutorial

1429

Laravel Tutorial

1333

PHP Tutorial

1278

C# Tutorial

1257

Related knowledge

How to solve win7 driver code 28 Dec 30, 2023 pm 11:55 PM

Some users encountered errors when installing the device, prompting error code 28. In fact, this is mainly due to the driver. We only need to solve the problem of win7 driver code 28. Let’s take a look at what should be done. Do it. What to do with win7 driver code 28: First, we need to click on the start menu in the lower left corner of the screen. Then, find and click the "Control Panel" option in the pop-up menu. This option is usually located at or near the bottom of the menu. After clicking, the system will automatically open the control panel interface. In the control panel, we can perform various system settings and management operations. This is the first step in the nostalgia cleaning level, I hope it helps. Then we need to proceed and enter the system and

What to do if the blue screen code 0x0000001 occurs Feb 23, 2024 am 08:09 AM

What to do with blue screen code 0x0000001? The blue screen error is a warning mechanism when there is a problem with the computer system or hardware. Code 0x0000001 usually indicates a hardware or driver failure. When users suddenly encounter a blue screen error while using their computer, they may feel panicked and at a loss. Fortunately, most blue screen errors can be troubleshooted and dealt with with a few simple steps. This article will introduce readers to some methods to solve the blue screen error code 0x0000001. First, when encountering a blue screen error, we can try to restart

Solve the 'error: expected initializer before 'datatype'' problem in C++ code Aug 25, 2023 pm 01:24 PM

Solve the "error:expectedinitializerbefore'datatype'" problem in C++ code. In C++ programming, sometimes we encounter some compilation errors when writing code. One of the common errors is "error:expectedinitializerbefore'datatype'". This error usually occurs in a variable declaration or function definition and may cause the program to fail to compile correctly or

The computer frequently blue screens and the code is different every time Jan 06, 2024 pm 10:53 PM

The win10 system is a very excellent high-intelligence system. Its powerful intelligence can bring the best user experience to users. Under normal circumstances, users’ win10 system computers will not have any problems! However, it is inevitable that various faults will occur in excellent computers. Recently, friends have been reporting that their win10 systems have encountered frequent blue screens! Today, the editor will bring you solutions to different codes that cause frequent blue screens in Windows 10 computers. Let’s take a look. Solutions to frequent computer blue screens with different codes each time: causes of various fault codes and solution suggestions 1. Cause of 0×000000116 fault: It should be that the graphics card driver is incompatible. Solution: It is recommended to replace the original manufacturer's driver. 2,

GE universal remote codes program on any device Mar 02, 2024 pm 01:58 PM

If you need to program any device remotely, this article will help you. We will share the top GE universal remote codes for programming any device. What is a GE remote control? GEUniversalRemote is a remote control that can be used to control multiple devices such as smart TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, streaming media players and more. GEUniversal remote controls come in various models with different features and functions. GEUniversalRemote can control up to four devices. Top Universal Remote Codes to Program on Any Device GE remotes come with a set of codes that allow them to work with different devices. you may

How to use Copilot to generate code Mar 23, 2024 am 10:41 AM

As a programmer, I get excited about tools that simplify the coding experience. With the help of artificial intelligence tools, we can generate demo code and make necessary modifications as per the requirement. The newly introduced Copilot tool in Visual Studio Code allows us to create AI-generated code with natural language chat interactions. By explaining functionality, we can better understand the meaning of existing code. How to use Copilot to generate code? To get started, we first need to get the latest PowerPlatformTools extension. To achieve this, you need to go to the extension page, search for "PowerPlatformTool" and click the Install button

Resolve code 0xc000007b error Feb 18, 2024 pm 07:34 PM

Termination Code 0xc000007b While using your computer, you sometimes encounter various problems and error codes. Among them, the termination code is the most disturbing, especially the termination code 0xc000007b. This code indicates that an application cannot start properly, causing inconvenience to the user. First, let’s understand the meaning of termination code 0xc000007b. This code is a Windows operating system error code that usually occurs when a 32-bit application tries to run on a 64-bit operating system. It means it should

Detailed explanation of the causes and solutions of 0x0000007f blue screen code Dec 25, 2023 pm 02:19 PM

Blue screen is a problem we often encounter when using the system. Depending on the error code, there will be many different reasons and solutions. For example, when we encounter the problem of stop: 0x0000007f, it may be a hardware or software error. Let’s follow the editor to find out the solution. 0x000000c5 blue screen code reason: Answer: The memory, CPU, and graphics card are suddenly overclocked, or the software is running incorrectly. Solution 1: 1. Keep pressing F8 to enter when booting, select safe mode, and press Enter to enter. 2. After entering safe mode, press win+r to open the run window, enter cmd, and press Enter. 3. In the command prompt window, enter "chkdsk /f /r", press Enter, and then press the y key. 4.

See all articles

Very practical code collection for vue2.0 projects

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics