标签:插件 vue 07 cookies 13 组件 state axios msg
1、vue-router
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
|
{ 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') }] }
|
1 2 3 4 5 6 7
|
<!-- 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 />
|
1 2 3
|
a.router-link-exact-active { color: #42b983; }
|
1 2 3 4 5
|
// router的逻辑转跳 this.$router.push('/one-view')
// router采用history方式访问上一级 this.$router.go(-1)
|
2、vuex
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
|
// 在任何一个组件中,均可以通过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: {
}
|
3、vue-cookies
1 2 3 4 5 6
|
// 安装cookie的命令 // npm install vue-cookies --save // 为项目配置全局vue-cookie import VueCookies from 'vue-cookies' // 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问 Vue.prototype.$cookies = VueCookies
|
1 2 3 4 5 6
|
// 持久化存储val的值到cookie中 this.$cookies.set('val', this.val, 300) // 获取cookie中val字段值 this.$cookies.get('val') // 删除cookie键值对 this.$cookies.remove('val')
|
4、axios
1 2 3
|
import axios from 'axios' # 安装的模块不用加相对路径
axios.get().then()
|
1 2 3 4 5
|
// 安装 axios(ajax)的命令 // npm install axios--save // 为项目配置全局axios import Axios from 'axios' Vue.prototype.$ajax = Axios
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
|
let _this = this this.$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) })
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
|
# 用pycharm启动该文件模拟后台 from flask import Flask, request, render_template from flask_cors import CORS app = 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()
|
5、跨域问题解决
1 2 3 4 5
|
# 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
|
vue.config.js
1 2 3 4 5 6 7 8 9 10
|
module.exports = { devServer: { proxy: { '/ajax': { target: 'https://m.maoyan.com/', changeOrigin: true } } } }
|
组件中
1 2 3 4 5 6 7
|
import axios from 'axios' mounted () { axios.get('ajax/moreClassicList?sortId=1&showType=3').then(res => { console.log(res.data) }) }
|
标签:插件,vue,07,cookies,13,组件,state,axios,msg
来源: https://www.cnblogs.com/erfeier/p/16151716.html
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。