caoxinjian423的博客

import axios from 'axios';import store from '../store';import router from '../router';import Vue from 'vue';//设置过期时间axios.defaults.timeout = 6000;//请求拦截axios.interceptors.request.use((config)=>{ //给请求添加token if(store.state.token){ .

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... },

store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { msg:"Hello Vuex!", name:"cxj", age:18, hobby:"美女" }, getters: { tenYearsOld(state){ return state.age + 1

store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { msg:"Hello Vuex!", name:"cxj", age:18, hobby:"美女" }, getters: { tenYearsOld(state){ return state.age + 1

store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { msg:"Hello Vuex!", name:"cxj", age:18, hobby:"美女" }, getters: { tenYearsOld(state){ return state.age + 1

store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { msg:"Hello Vuex!", name:"cxj", age:18, hobby:"美女" }, mutations: { }, actions: { }, modules: { }})App

eventBus.jsimport Vue from 'vue';export const EventBus = new Vue();components/Parent.vue<template> <div> 我是父组件 <Son></Son> </div></template><script>/*vm.$on( event, callback )

components/Parent.vue<template> <div> 我是父组件 <br> 这里显示父级的msg:{{msg}} <Son :msg="msg" @changeMsg="changeMsg"></Son> </div></template><script>/*$listeners:包含了父作用域

components/Button.vue<template> <div> <button :disabled="$attrs.disabled">点击</button> </div></template><script> export default { inheritAttrs: false, }</script><s

components/Parent.vue<template> <div> 我是父组件 <br> 这里显示父级的msg:{{msg}} <Son :title="title"></Son> </div></template><script>/*$attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的 a

components/Parent.vue<template> <div> 我是父组件 <br> 这里显示父级的msg:{{msg}} <Son></Son> </div></template><script>/*provide 、inject只能父级给子孙后代传递参数，而不知道子孙后代到底有多少，子孙后代怎么操作父级

components/Parent.vue<template> <div> 我是父组件 <Son></Son> </div></template><script>/*provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Ob

App.vue<template> <div id="app"> <Parent></Parent> </div></template><script>import Parent from './components/Parent'export default { name: 'App', components: { Parent }}</script>

App.vue<template> <div id="app"> <Parent></Parent> </div></template><script>import Parent from './components/Parent'export default { name: 'App', components: { Parent }}</script>

App.vue<template> <div id="app"> <Parent></Parent> </div></template><script>import Parent from './components/Parent'export default { name: 'App', components: { Parent }}</script>

App.vue<template> <div id="app"> <Parent></Parent> </div></template><script>import Parent from './components/Parent'export default { name: 'App', components: { Parent }}</script>

App.vue<template> <div id="app"> <Parent></Parent> </div></template><script>import Parent from './components/Parent'export default { name: 'App', components: { Parent }}</script>

效果截图：代码目录：github链接：https://github.com/caoxinjian423/practice-vue-router

全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。每个守卫方法接收三个参数：to: 即将要进入的目标 路由对象from: 当前导航正要离开的.

App.vue<template> <div id="app"> <div id="nav"> <router-link :to="{name:'Home'}">Home</router-link> | <router-link to="/about">About</router-link> <button @click="handelJsNavigation" v

App.vue<template> <div id="app"> <div id="nav"> <!-- router-link应用于路由导航，相对于a标签，router-link可以在单页面跳转，体验更好 router-link的to参数可以接收字符串(path,不需要:进行属性绑定)，也可以接收一个对象（命名路由，需要:进行属性绑定）， 里面的name参数为要跳转到路由的名字

router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound from '../views/NotFound.vue'import TestChild from '../views/TestChild.vue'import AView fr

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import NotFound from '../views/NotFound.vue'import AView from '../views/AView.vue'import BView from '../views/BView.vue'Vue.use(VueRouter)const routes = [.

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import NotFound from '../views/NotFound.vue'import AView from '../views/AView.vue'import BView from '../views/BView.vue'Vue.use(VueRouter)const routes = [.

router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound from '../views/NotFound.vue'import TestChild from '../views/TestChild.vue'import AView fr

router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound from '../views/NotFound.vue'import TestChild from '../views/TestChild.vue'Vue.use(VueRou

router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound from '../views/NotFound.vue';Vue.use(VueRouter)const routes = [ { path: '/',

router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound from '../views/NotFound.vue';Vue.use(VueRouter)const routes = [ { path: '/',

router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue';Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', component: Home }, {

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () .

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)/* SPA:单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新 该页面的Web应用程序，即更新视图而不重新请求页面。带给用户更好的体验。 vue-.

1、main.jsimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import "./assets/login.css"import "./assets/photo.css"import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falseVue.use(ElementUI);

背景：在我们使用Vue直接请求后端时，通常会报跨域问题，如下图：要解决这个问题，方案有很多种，最简单的莫过于vue-cli的devServer配置。devServer配置在vue项目下创建vue.config.js文件，如下图：在vue.config.js中写入devServer配置，例如：module.exports = { devServer: { proxy: { "/api": { target: "http:

配置环境安装@vue/clinpm install -g @vue/cli检查vue/cli版本vue --version安装vue serve以便使用vue.server和vue.build对*.vue文件进行编译npm install -g @vue/cli-service-global运行vue单文件新建一个test.vue.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：ht

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt.