• Vue之路由跳转、路由传参、跨组件传参以及前后端项目开发交互、跨域问题


    一.路由跳转

    两种方式
    1.根据url直接跳转
        this.$router.push('/course');
        <router-link to="/course">课程页</router-link>;
    2.根据路由中起的别名跳转
        this.$router.push({name:course});
        <router-link to="{name:'course'}">课程页</router-link>

    还可以跳转上下页

    回到上一页
    this.$router.go(-1);
    进入下一页(必须有历史记录的情况下)
    this.$router.go(1);

    二.路由传参

    两种方式

    第一种

    router.js

    routes: [
        // ...
        {
            path: '/course/detail/:id',
            name: 'course-detail',
            component: CourseDetail
        },
    ]

    跳转.vue

    <template>
        <!-- 标签跳转 -->
        <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
    </template>
    <script>
        // ...
        goDetail() {
            // 逻辑跳转
            this.$router.push(`/course/${this.course.id}/detail`);
        }
    </script>

    接收.vue

    created() {
        let id = this.$route.params.id;
    }

    第二种

    router.js

    routes: [
        // ...
        {
            path: '/course/detail',
            name: 'course-detail',
            component: CourseDetail
        },
    ]

    跳转.vue

    <template>
        <!-- 标签跳转 -->
        <router-link :to="{
                name: 'course-detail',
                query: {id: course.id}
            }">{{ course.name }}</router-link>
    </template>
    <script>
        // ...
        goDetail() {
            // 逻辑跳转
            this.$router.push({
                name: 'course-detail',
                query: {
                    id: this.course.id
                }
            });
        }
    </script>

    接收.vue

    created() {
        let id = this.$route.query.id;
    }

    三.跨组件传参

    1.可以完成跨组件传参的四种方式

    // 1) localStorage:永久存储数据
    // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置)
    // 3) cookie:临时或永久存储数据(由过期时间决定)
    // 4) vuex的仓库(store.js):临时存储数据(刷新页面数据重置)

    2.vue仓库插件

    store.js配置文件

    export default new Vuex.Store({
        state: {
            title: '默认值'
        },
        mutations: {
            // mutations 为 state 中的属性提供setter方法
            // setter方法名随意,但是参数列表固定两个:state, newValue
            setTitle(state, newValue) {
                state.title = newValue;
            }
        },
        actions: {}
    })

    在任意组件中可以给仓库的变量赋值

    this.$store.state.title = 'newTitle'
    this.$store.commit('setTitle', 'newTitle')

    在任意组件中可以取仓库变量的值

    console.log(this.$store.state.title)

    三.配置vue-cookies和axios插件

    1. vue-cookies插件

    cookie一般都是用来存储token的

    1.什么是token
        token是安全认证的字符串
    2.谁产生的
        前台发送数据,后台根据传过来数据生成token
    3.谁来存储
        后台存储(session表、文件、内存缓存),前台存储(cookie)
    4.如何使用
        服务器先生成反馈给前台(登录认证过程),前台提交给后台完成认证(需要登录后的请求)
    5.前后台分离项目
        后台生成token,返回给前台,前台自己存储,发送携带token请求,后台完成token校验,后台得到登录用户

    安装vue-cookie插件

    在终端中输入该命令
    >: cnpm install vue-cookies

    main.js文件中配置

    // 第一种
    import cookies from 'vue-cookies'      // 导入插件
    Vue.use(cookies);                    // 加载插件
    new Vue({
        // ...
        cookies,                        // 配置使用插件原型 $cookies
    }).$mount('#app');
    
    // 第二种
    import cookies from 'vue-cookies'    // 导入插件
    Vue.prototype.$cookies = cookies;    // 直接配置插件原型 $cookies

    使用

    // 增(改): key,value,exp(过期时间)
    // 1 = '1s' | '1m' | '1h' | '1d'
    this.$cookies.set('token', token, '1y');
    
    // 查:key
    this.token = this.$cookies.get('token');
    
    // 删:key
    this.$cookies.remove('token');

    2. axios插件

     安装

    >: cnpm install axios

    main.js配置

    import axios from 'axios'    // 导入插件
    Vue.prototype.$axios = axios;    // 直接配置插件原型 $axios

    使用

    this.axios({
        url: '请求接口',
        method: 'get|post请求',
        data: {post等提交的数据},
        params: {get提交的数据}
    }).then(请求成功的回调函数).catch(请求失败的回调函数)

    案例

    // get请求
    this.$axios({
        url: 'http://127.0.0.1:8000/test/ajax/',
        method: 'get',
        params: {
            username: this.username
        }
    }).then(function (response) {
        console.log(response)
    }).catch(function (error) {
        console.log(error)
    });
    
    // post请求
    this.$axios({
        url: 'http://127.0.0.1:8000/test/ajax/',
        method: 'post',
        data: {
            username: this.username
        }
    }).then(function (response) {
        console.log(response)
    }).catch(function (error) {
        console.log(error)
    });

     

    跨域问题

    后端需要把csrf中间件禁掉,并且需要解决跨域问题

    跨域问题(同源策略)

    // 后台接收到前台的请求,可以接收前台数据与请求信息,发现请求的信息不是自身服务器发来的请求,拒绝响应数据,这种情况称之为 - 跨域问题(同源策略 CORS)
    
    // 导致跨域情况有三种
    // 1) 端口不一致
    // 2) IP不一致
    // 3) 协议不一致
    
    // Django如何解决 - django-cors-headers模块
    // 1) 安装:pip3 install django-cors-headers
    // 2) 注册:
    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
    // 3) 设置中间件:
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]
    // 4) 设置跨域:
    CORS_ORIGIN_ALLOW_ALL = True

    3. element-ui插件

     安装

    >: cnpm i element-ui -S

    main.js配置

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

    使用

    依照官网 https://element.eleme.cn/#/zh-CN/component/installation api

     67

  • 相关阅读:
    MySQL中去重字段完全相同的数据
    SVN自动更新-win平台
    EF出错:Unable to convert MySQL date/time value to System.DateTime
    微信不支持Object.assign
    记录一下dotnetcore.1.0.0-VS2015Tools.preview2安装不上的问题
    Ajax表单异步上传(包括文件域)
    .NET web开发之WebApi初试水
    遍历数组一次求得数组的平均数、标准差、方差
    记STM32F030多通道ADC DMA读取乱序问题
    RT-Thread入门和模拟器的配置生成
  • 原文地址:https://www.cnblogs.com/sxchen/p/11667916.html
Copyright © 2020-2023  润新知