123456789101112131415161718192021222324

{    path: '/',    name: 'home',    // 路由的重定向    redirect: '/home'}{    // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签    path: '/one-view',    name: 'one',    component: () => import('./views/OneView.vue')}{    // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签    path: '/one-view/one-detail',    component: () => import('./views/OneDetail.vue'),    // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的<router-view/>标签    children: [{        path: 'show',        component: () => import('./components/OneShow.vue')    }]}

1234567

<!-- router-link渲染为a标签 --><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link> |<router-link :to="{name: 'one'}">One</router-link> |<!-- 为路由渲染的组件占位 --><router-view />

123

a.router-link-exact-active {    color: #42b983;}

12345

// router的逻辑转跳this.$router.push('/one-view')// router采用history方式访问上一级this.$router.go(-1)

12345678910111213141516

// 在任何一个组件中,均可以通过this.$store.state.msg访问msg的数据// state永远只能拥有一种状态值state: {    msg: "状态管理器"},// 让state拥有多个状态值mutations: {    // 在一个一个组件中,均可以通过this.$store.commit('setMsg', new_msg)来修改state中的msg    setMsg(state, new_msg) {        state.msg = new_msg    }},// 让mutations拥有多个状态值actions: {}

123456

// 安装cookie的命令// npm install vue-cookies --save// 为项目配置全局vue-cookieimport VueCookies from 'vue-cookies'// 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问Vue.prototype.$cookies = VueCookies

123456

// 持久化存储val的值到cookie中this.$cookies.set('val', this.val, 300)// 获取cookie中val字段值this.$cookies.get('val')// 删除cookie键值对this.$cookies.remove('val')

123

import axios from 'axios' # 安装的模块不用加相对路径axios.get().then()

12345

// 安装 axios(ajax)的命令// npm install axios--save// 为项目配置全局axiosimport Axios from 'axios'Vue.prototype.$ajax = Axios

12345678910111213141516

let _this = thisthis.$ajax({    method: 'post',    url: 'http://127.0.0.1:5000/loginAction',    params: {        usr: this.usr,        ps: this.ps    }}).then(function(res) {    // this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向    // 要更新页面的title变量,title属于vue实例    // res为回调的对象,该对象的data属性就是后台返回的数据    _this.title = res.data}).catch(function(err) {    window.console.log(err)})

123456789101112131415161718192021222324

# 用pycharm启动该文件模拟后台from flask import Flask, request, render_templatefrom flask_cors import CORSapp = Flask(__name__)CORS(app, supports_credentials=True)@app.route('/')def index():    return "<h1>主页</h1>"@app.route('/loginAction', methods=['GET', 'POST'])def test_action():    # print(request.args)    # print(request.form)    # print(request.values)    usr = request.args['usr']    ps = request.args['ps']    if usr != 'abc' or ps != '123':        return 'login failed'    return 'login success'if __name__ == '__main__':    app.run()

12345

# http://www.mei.com/silo/women 响应头中Access-Control-Allow-Origin: * 允许所有的域访问# 以猫眼电影为例 ：https://m.maoyan.com/#movie# devServer.proxy# https://cli.vuejs.org/zh/config/#devserver-proxy

12345678910

module.exports = {  devServer: {    proxy: {      '/ajax': {        target: 'https://m.maoyan.com/',        changeOrigin: true      }    }  }}

1234567

import axios from 'axios'mounted () {  axios.get('ajax/moreClassicList?sortId=1&showType=3').then(res => {    console.log(res.data)  })}