Vue 08.31

路由传参

第一种

router.js

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

传递层

<!-- card的内容
{
	id: 1,
	bgColor: 'red',
	title: 'Python基础'
}
-->
<router-link :to="`/course/detail/${card.id}`">详情页</router-link>

接收层

let id = this.$route.params.pk

演变体

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

<router-link :to="`/course/${card.id}/${card.title}/detail`">详情页</router-link>

let id = this.$route.params.pk
let title = this.$route.params.name
"""

第二种

router.js

{
    // 浏览器链接显示：/course/detail，注：课程id是通过数据包方式传递
    path: '/course/detail',
    name: 'course-detail',
    component: CourseDetail
}

传递层

<!-- card的内容
{
	id: 1,
	bgColor: 'red',
	title: 'Python基础'
}
-->
<router-link :to="{
                  name: 'course-detail',
                  params: {pk: card.id}
                  }">详情页</router-link>

接收层

let id = this.$route.params.pk

第三种

router.js

{
    // 浏览器链接显示：/course/detail?pk=1，注：课程id是通过路由拼接方式传递
    path: '/course/detail',
    name: 'course-detail',
    component: CourseDetail
}

传递层

<!-- card的内容
{
	id: 1,
	bgColor: 'red',
	title: 'Python基础'
}
-->
<router-link :to="{
                  name: 'course-detail',
                  query: {pk: card.id}
                  }">详情页</router-link>

接收层

let id = this.$route.query.pk

Django跨域问题

什么是跨域

'''
通常情况下，A网页访问B服务器资源时，不满足以下三个条件其一就是跨域访问
1. 协议不同
2. 端口不同
3. 主机不同
'''

Django解决跨域

'''
安装django-cors-headers模块

在settings.py中配置
# 注册app
INSTALLED_APPS = [
	...
	'corsheaders'
]
# 添加中间件
MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware'
]
# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True

# 上线配置指定域名
CORS_ORIGIN_WHITELIST = [
	'http://example.com'
]
'''