路由：vue-router

路由：vue-router

1）name使用

路由配置

import Main from './views/Main'routes: [   {        path: '/main',        name: 'main',        component: Main   }]

视图使用

<router-link :to="{name: 'main'}">主页</router-link>

 

2）router-link与系统a标签的区别

router-link：会被vue渲染成a标签，但是点击这样的a标签不能发生页面的转跳，只会出现组件的替换a：也可以完成同样的效果，但是会发生页面的转跳

 

3）路由重定向

routes: [ {        path: '/',        name: 'home',        component: Home   },   {        path: '/home',        redirect: '/', // 重定向   }]

 

4）路由传参-1

路由：router.js

{    // path如果是通过to直接访问，路由必须完全对应    // :id代表可以完成任意内容匹配，用变量id保存    // 请求/course/detail/1 和 /course/detail/abc，id变量分别存的1和abc    // path: '/course/detail/1', // 死的    path: '/course/detail/:id',  // 活的    name: 'course-detail',    component: CourseDetail}

转跳页面：Course.vue

<template>    <div class="course">        <h1>课程</h1>        <hr>​        <ul>            <li v-for="course in courses" :key="course.title">                <router-link :to="'/course/detail/' + course.id">{{ course.title }}</router-link>            </li>        </ul>​    </div></template>​<script>    let course_list = [       {            id: 1,            title: '水浒传'       },       {            id: 2,            title: '西游记'       },       {            id: 3,            title: '哪吒'       },   ];    export default {        name: "Course",        data () {            return {                courses: []           }       },        // 组件创建成功去获取数据        created () {            this.courses = course_list       },​​   }</script>​<style scoped>    li a {        display: block;   }    li, li a {        border: 1px solid pink;        background-color: rgba(123, 21, 56, 0.3);        margin-top: 10px;        line-height: 80px;        cursor: pointer;   }</style>

 

渲染页面：CourseDetail.vue

<template>    <div class="course-detail">        <h1>课程详情</h1>        <hr>        <h2>{{ ctx }}</h2>    </div></template>​<script>    let course_detail_list = [        '数据有误', '水浒传', '西游记', '哪吒'   ];​    export default {        name: "CourseDetail",        data () {            return {                ctx: ''           }       },        created () {            console.log('详情页面被渲染了');            // this.$route：负责路由的数据            // this.$router：负责路由的路径            // this.$route.params可以拿到链接中 :变量 变量中的数据            let index = this.$route.params.id;            if (index < 0 || index >= course_detail_list.length) index = 0;            this.ctx = course_detail_list[index]       }   }</script>​<style scoped>​</style>

 

4）路由传参-2

路由：router.js

{    path: '/course/detail',    name: 'course-detail',    component: CourseDetail}

转跳页面：Course.vue

<router-link :to="'/course/detail?id=' + course.id">{{ course.title }}</router-link>

渲染页面：CourseDetail.vue

created () {    let index = this.$route.query.id;    if (index < 0 || index >= course_detail_list.length) index = 0;    this.ctx = course_detail_list[index]}

 

5）路由传参-3

路由：router.js

{    path: '/course/detail',    name: 'course-detail',    component: CourseDetail}

转跳页面：Course.vue

methods: {    转跳的方法 (参数) {        this.$router.push({            name: 'course-detail',            params 或者 query: {                参数们           },           : {                参数们           }       })   }}

渲染页面：CourseDetail.vue

created () {    let 参数的数据 = this.$route.query.参数的key 或者 this.$route.params.参数的key}

 

6）go

this.$router.go(-1)  //返回历史记录的前一页

 

 

仓库：vuex

仓库配置：store.js

import Vue from 'vue'import Vuex from 'vuex'​Vue.use(Vuex);​export default new Vuex.Store({    // 全局可以访问的变量 - 获取值    // 组件内：this.$store.state.title    state: {        title: '主页'   },    // 全局可以访问的方法 - 修改值    // 组件内：this.$store.commit('updateTitle', '新值')    mutations: {        updateTitle (state, newValue) {            state.title = newValue       }   },    actions: {}})

 

前后台交互：axios

安装

>: cd 项目目录>: cnpm install axios --save

配置：main.js

import Axios from 'axios'Vue.prototype.$axios = Axios;

跨域问题(同源策略)：Access-Control-Allow-Origin => CORS

前提：前台向后跳请求数据1）服务器不一致 - ip2）应用不一致 - 端口3）协议不一致 - http <-> https

django解决跨域

'''1）安装django-cors-headers模块​2）在settings.py中配置# 注册appINSTALLED_APPS = [ ... 'corsheaders']3）添加中间件MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware']4）允许跨域源CORS_ORIGIN_ALLOW_ALL = True'''

axios请求方式

get

this.$axios({    url: 'http://localhost:8000/test/data/',    method: 'get',    params: {        usr: 'zero',        pwd: '000'   }}).then((response) => {    console.log(response.data)}).error((error) => {    console.log(error)});​​this.$axios.get('http://localhost:8000/test/data/', {    params: {        usr: 'zero',        pwd: '000'   }}).then((response) => {    console.log(response.data)}).error((error) => {    console.log(error)});

post

this.$axios({    url: 'http://localhost:8000/test/data/',    method: 'post',    data: {        username: 'owen',        password: '123'   }}).then((response) => {    console.log(response.data)}).error((error) => {    console.log(error)});​​this.$axios.post('http://localhost:8000/test/data/', {    username: 'owen',    password: '123',    headers: {        'Content-Type': 'urlencoded'   }}).then((response) => {    console.log(response.data)}).error((error) => {    console.log(error)});

 

 

前台操作Cookie：vue-cookie

安装

>: cd 项目目录>: cnpm install vue-cookie --save

配置：main.js

import cookie from 'vue-cookie'Vue.prototype.$cookie = cookie;

使用：在任何方法中

// token是后台返回的​// 设置cookie// this.$cookie.set(key, value, time)this.$cookie.set('token', token, 1);​// 取出cookie// this.$cookie.get(key)console.log(this.$cookie.get('token'));​// 删除cookie// this.$cookie.delete(key)this.$cookie.delete('token');

 

 

转载于:https://www.cnblogs.com/HZLS/p/11348668.html