1.vue中全局注册组件:https://blog.csdn.net/qq_34089503/article/details/81329405
2.vue中全局定义变量:https://blog.csdn.net/qq_30669833/article/details/81706217
3.vue中路由跳转传参的方式:
1.路径:http://localhost:8081/#/test?name=1
<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)
使用:this.$route.query.name
2.路径:http://localhost:8081/#/test/1
<router-link :to="'/test/'+id">跳转</router-link>(id是参数)
路由:
使用:this.$route.params.id(这个id给上图路由的配置有关);
3.在方法中跳转界面并传参,两种方式:params 与 query
this.$router.push({path:'/order',query:{ id:'2'}}); 接收参数:this.$route.query.id
this.$router.push({name:'order',params:{ id:'6'}}); 接收参数: this.$route.params.id
1、用法上的
刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
注意接收参数的时候,已经是$route而不是$router了哦!!
2、展示上的
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
4.父子组件之间的通讯:
父向子传参:
子组件里面:
<div>{{msgfromfa}}</div>
定义一个自定义属性:props:['msgfromfa']
父组件里面:
1. 首先引入 import componentA from '@/components/componentA'
2.注册子组件 components: { componentA }
3.引用 <component-a msgfromfa="(Just Say U Love Me)"></component-a>
子组件向父组件传参:
1.在子组件里面 this.$emit('say',this.msg) 第一个参数是自定义的事件,第二个参数是要传递的参数
2.在父组件里面 <component-a @say=“fun”></component-a>
fun(msg){
console.log(msg,"msg就是子组件传递过来的参数")
}
5.vue里面动态的更改title:
index.js里面的meta里面配置每个页面的title:
main.js里面:
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
6.vue里面路由登录拦截:https://www.cnblogs.com/beileixinqing/p/7729780.html
7.vue里面解决跨域问题:https://www.cnblogs.com/wangqiao170/p/9288160.html
8.路由配置:
9.路由激活状态的样式:
10.vue中滑动导航插件:https://www.imooc.com/article/23768?block_id=tuijian_wz