Vue面试高频

---

一、Vue 怎么实现跨域?

  1）什么是跨域
        跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指
        协议，端口，域名。只要这个 3 个中有一个不同就是跨域
    2）使用 Vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题
    打开 config/index.js,在 proxyTable 中添写如下代码：
    proxyTable: {
    '/api': { 
        //使用"/api"来代替"http://f.apiplus.c"
        target: 'http://f.apiplus.cn', //源地址
        changeOrigin: true, //改变源
        pathRewrite: {
        '^/api': 'http://f.apiplus.cn' //路径重写
    }
    3）使用 CORS（跨域资源共享）
        1、前端设置：
        前端 Vue 设置 axios 允许跨域携带 cookie（默认是不带 cookie）
        axios.defaults.withCredentials = true;
        2、后端设置：
        1、 跨域请求后的响应头中需要设置：
        2、 Access-Control-Allow-Origin 为发起请求的主机地址。
        3、 Access-Control-Allow-Credentials，当它被设置为 true 时，允许跨域
        带 cookie，但此时 Access-Control- Allow-Origin 不能为通配符*。
        4、 Access-Control-Allow-Headers，设置跨域请求允许的请求头。
        5、 Access-Control-Allow-Methods，设置跨域请求允许的请求方式。

二、路由传值的方式有哪几种

Vue-Router 传参可以分为两大类，分别是编程式的导航 router.push 和声明式
的导航
1）router.push
字符串：直接传递路由地址，但是不能传递参数
this.$router.push("home")
对象：
命名路由 这种方式传递参数，目标页面刷新会报错
this.$router.push({name:"news",params:{userId:123})
查询参数
query
和 name 配对的式 params，和 path 配对的是
this.$router.push({path:"/news',query:{uersId:123})
接收参数 this.$route.query
2）声明式导航
字符串 <router-link to:"news"></router-link>
命名路由
link :to:"{name:'news',params:{userid:1111}}"></route-link>
<router-link :to="{path:'/news',query:{userId:1111}}"></router-link>