路由传参及跨域

最新推荐文章于 2024-05-19 13:37:59 发布

猪皮惡霸

最新推荐文章于 2024-05-19 13:37:59 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/typeof83/article/details/109732526

本文详细介绍了Vue.js的路由配置，包括静态路由、动态路由、重定向、别名以及异步加载组件。同时，讨论了跨域问题的解决，利用vue.config.js中的代理设置进行API请求的转发，确保本地开发环境的数据请求能够正确发送到目标服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

router.js


import Box from './views/Box.vue'
{
  path: '/box',
  name: 'box',
  component: Box
  component: ()=>{ import('./views/Box.vue) } 异步路由
  components: {
    default: ()=>{ import('./views/Box.vue) },
    a: ()=>{ import('./views/Box1.vue) },
    login: ()=>{ import('./views/Box2.vue) }
  },
}
<router-link to="{name: 'box'}">

<router-view>
<router-view name="login">

export default router

main.js
在实例配置中注册路由

路由参数
this.$router 路由操作对象
this.$route 路由信息对象

传参
{
  path: '/child/:abc/:id', 动态路由
  name: 'child',
  props: true,
  children: [
    {
      path: ...,
      children: [
        {...}
      ]
    }
  ]
}
this.$router.push('/child?abc=123&id=888')
this.$router.push({
  path: '/child',
  query: {
    abc: 123,
    id: 888
  }
})
this.$router.push({
  name: 'child',
  params: {
    abc: 123,
    id: 888
  }
})

接收
this.$route.params  获取动态路由的传参
在组件内通过props接收动态路由的传参
this.$route.query 获取query的传参
this.$route.params 获取params的传参

{
  path: '/',
  redirect: '/home' 重定向
}
{
  path: '/home',
  alias: '/index'  别名
}

路由模式

哈希路由 url后面带有#
history路由 url后面带没有#

vue全家桶

vue + vue-router + vuex + axios(fetch) + UI组件库

数据请求

原生js的ajax
JQ中的ajax
fetch原生js的新的api
axios vue-resource

跨域：协议、域名、端口三者中国任意一个不相同即为跨域

module.exports = {
  lintOnSave: false,
  devServer: {
    proxy: {// 代理配置
      '/hehe': {
        target: 'https://m.you.163.com',// 请求的目标地址
        changeOrigin: true,// 是否改变请求地址（是否跨域）
        pathRewrite: {// 重写请求地址
          '^/hehe': ''// 把所有请求开头为'/hehe'地址，把'/hehe'替换成''
        }
      }
    }
  }
}
let url = '/hehe/xhr/index.json?__timestamp=1599464168069'
本地请求地址为：http://localhost:8080/hehe/xhr/index.json?__timestamp=1599464168069
数据请求地址：https://m.you.163.com/hehe/xhr/index.json?__timestamp=1599464168069
实际的请求地址：https://m.you.163.com/xhr/index.json?__timestamp=1599464168069

vm.$nextTick()

延迟执行一段代码
相当于代码放入到 setTimeout(()=>{…},0)
数据更新，dom并没有完成更新！因为，dom更新是异步的！！！

补充

基于promise的http库
import axios from 'axios'
axios.get(url+参数)
.then(()=>{

})
.catch(()=>{

})

axios.post(url,{
  a:1,
  b:2
})
.then(()=>{

})
.catch(()=>{

})


vue.config.js
module.exports = {
  devServer: {
    proxy: {// 跨域 代理配置
      '/haha': {
        target: 'http://www.baidu.com',// 服务器转发地址
        changeOrigin: true,
        pathRewirte:{
          '^/haha': ''
        }
      }
    }
  }
}
本地发起请求：'/haha/abc/demo?id=123'
'http://localhost:8080/haha/abc/demo?id=123'


转发地址+本地请求地址 http://www.baidu.com + /haha/abc/demo?id=123

'^/haha': '' 当本地发起的请求路径中 开头是'/haha'地址，将'/haha'替换''
http://www.baidu.com + ''/abc/demo?id=123


vm.nextTick()
用于延迟执行一段代码
类似于把代码放在 setTimeout(()=>{},10) 计时器中

console.log('程序1')
setTimeout(()=>{
  console.log('程序2')
},0)
console.log('程序3')

<div ref="box">{{msg}}</div>
data: {
  msg: 123
}

this.msg = 456
console.log( this.$refs.box.innerHTML )// 123
dom更新需要一个过程，是异步的
this.$nextTick(()=>{
  console.log( this.$refs.box.innerHTML )// 456
})