vue 路由传参,vue路由组件传值
本文主要介绍vue中路由和跨组件传输的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
路由跳转
这个。$ router . push(/course )；
这个。$ router . push({ name:course })；
这个。$ router . go(-1)；
这个。$ router . go(1)；
路由器链接=/course 课程页面/路由器链接
router-link:to= { name: course } 课程页面/router-link
路由传参
方法一
router.js
这个。$ router . push(/course )；
这个。$ router . push({ name:course })；
这个。$ router . go(-1)；
这个。$ router . go(1)；
路由器链接=/course 课程页面/路由器链接
router-link:to= { name: course } 课程页面/router-link
跳。某视频剪辑软件
模板
！-标签跳转-
router-link:to= `/course/$ { course . id }/detail ` { { course . name } }/router-link
/模板
脚本
//.
goDetail() {
//逻辑跳转
这个。$ router . push(`/course/$ { this . course . id }/detail `)；
}
/脚本
收到。某视频剪辑软件
已创建(){
设id=this。$ route . params . id；
}
如果在路由路径中写入了路由匹配，如：id(“:”相当于后端匹配，“id”相当于已知数据包的名称)。
方法二
router.js
已创建(){
设id=this。$ route . params . id；
}
跳。某视频剪辑软件
模板
！-标签跳转-
路由器-链接：to={
名称：课程-详细信息，
查询：{id: course.id}
}{{ course.name }}/router-link
/模板
脚本
//.
goDetail() {
//逻辑跳转
这个。$router.push({
名称：课程-详细信息，
查询：{
id: this.course.id
}
});
}
/脚本
收到。某视频剪辑软件
模板
！-标签跳转-
路由器-链接：to={
名称：课程-详细信息，
查询：{id: course.id}
}{{ course.name }}/router-link
/模板
脚本
//.
goDetail() {
//逻辑跳转
这个。$router.push({
名称：课程-详细信息，
查询：{
id: this.course.id
}
});
}
/脚本
有四种方法可以在组件间传递参数。
//1) localStorage:数据的永久存储
//2) sessionStorage:临时存储数据(刷新页面数据不重置，关闭再重新打开标签页数据重置)
//3) cookie:数据的临时或永久存储(由到期时间决定)
//4) vuex的仓库(store.js):临时存储数据(刷新页面数据，复位)
vuex仓库插件
Store.js配置文件
导出默认的新Vuex。商店({
状态：{
标题：“默认”
},
突变：{
//突变为state中的属性提供setter方法。
setter方法名是任意的，但是有两个固定的参数列表：state，newValue。
setTitle(state，newValue) {
state.title=newValue
}
},
动作：{}
})
为任何组件中的仓库变量赋值。
这个。$ store . state . title= new title //The first
This.store.com麻省理工学院( settitle ，新标题)//第二种
第二个是突变中提供的setter方法。虽然这个方法最终会把值传递给状态，但是我们可以在这个setter方法里面写一些验证和其他的判断。
取任意组件中仓库变量的值。
console.log(这个。$store.state.title)
vue-cookie插件
固定
console.log(这个。$store.state.title)
Main.js配置
//第一种
从“vue-cookies”//导入插件导入cookie
vue . use(cookie)；//加载插件
新Vue({
//.
cookie，//配置为使用插件原型$cookies
}).$ mount( # app )；
//第二种
从“vue-cookies”//导入插件导入cookie
vue . prototype . $ cookies=cookies；//直接配置插件原型$cookies
使用
//Add (change): key，value，exp(到期时间)
//1=1s 1m 1h 1d
这个。$cookies.set(token ，token， 1y )；
//Check: key
this.token=this。$ cookies . get( token )；
//Delete: key
这个。$ cookies . remove( token )；
注意：cookie通常用于存储令牌。
//1)什么是token:安全认证的字符串？
//2)谁制作的：后台制作。
//3)谁来存储：后台存储(会话表、文件、内存缓存)、前台存储(cookie)
//4)使用方法：服务器向前台发送反馈(登录认证流程)，前台提交给后台完成认证(需要登录后请求)。
//5)前后分离项目：后台生成令牌并返回给前台=前台自行存储，并发送令牌携带请求=后台完成令牌验证=后台获取登录用户。
(如上所述，跨组件的参数传递也可以用cookies来完成。由于cookies中没有设置默认值，如果为null，那么在view函数中也会为null，所以我们也要在view函数中设置一个默认值，然后判断cookies传递的值。如果它不为空，用它替换默认值，然后呈现它。)
axios插件
固定
:cnpm安装axios
Main.js配置
从“axios”//导入插件导入axios
Vue.prototype. $ axios=axios//直接配置插件原型$axios
使用
this.axios({
Url:“请求接口”，
方法： getpost请求，
数据：{通过邮寄等方式提交的数据}，
参数：{获取提交的数据}
}).然后(请求成功的回调函数)。catch(请求失败的回调函数)
情况
//获取请求
这个。$axios({
URL: http://127 . 0 . 0 . 1:8000/test/Ajax/，
方法：“get”，
参数：{
用户名：this .用户名
}
}).然后(函数(响应){
console.log(响应)
}).catch(函数(错误){
console.log(错误)
});
//发布请求
这个。$axios({
URL: http://127 . 0 . 0 . 1:8000/test/Ajax/，
方法： post ，
数据：{
用户名：this .用户名
}
}).然后(函数(响应){
console.log(响应)
}).catch(函数(错误){
console.log(错误)
});
跨领域问题(同源策略)
//后台收到前台的请求时，可以接收前台数据和请求信息。当它发现请求的信息不是它自己的服务器发送的请求时，它拒绝响应数据。这种情况被称为——跨域问题(同源策略CORS)
//跨域的情况有三种。
//1)端口不一致。
//2)IP不一致
//3)约定不一致。
//Django如何解决它-django-cors-headers模块
//1)安装：pip3安装django-cors-headers
//2)注册：
INSTALLED_APPS=[
.
科尔谢德斯的
]
//3)设置中间件：
中间件=[
.
CORS headers . middleware . CORS middleware
]
//4)设置跨域：
CORS _起源_允许_全部=真
element-ui插件
固定
:cnpm i元素-ui -S
Main.js配置
从“element-ui”导入ElementUI
导入“element-ui/lib/theme-chalk/index . CSS”；
vue . use(element ui)；
使用
根据https://element.eleme.cn/#/zh-CN/component/installation官方网站的API
总结
关于vue路由和跨组件路由的这篇文章到此为止。有关vue路由和跨组件路由的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。