通过导航栏跳转
点击对应列表项,通过路由进行跳转
active-class属性:点击router-link的内容,匹配对应样式
exact-active-class:点击router-link的内容,匹配对应样式(更精确)(这里是调整点击后文字的颜色)
<template>
<div class="nav">
<ul>
<li v-for="(value,index) in navarr" :key="index">
<router-link :to="value.url" exact-active-class="textColor">{{ value.name }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name:"NavDemo",
data(){
return{
navarr:[
{name:"首页",url:"/"},
{name:"MV",url:"/mv"}
]
}
}
}
</script>
跨域
Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的,它阻止了一个源(origin)的网页上的JavaScript 代码请求另一个源的资源。
也就是说,只要https://www.baidu.com中https://,www.baidu,.com中有一个不一样,就会导致存在跨域问题。
解决办法:
在vue.config.js的module.exports中添加代码
devServer: {
// 反向代理(处理跨域问题)
proxy: {
"/api": { // /api表示拦截以/api开头的请求路径
target: "https://www.vue-js.com/api", //目标路径
changeOrigin: true, //是否开启跨域
ws: false,
pathRewrite: { //重写路径
"^/api": ""
}
}
}
}
这里是把有 "/api" 的路径都拦截,并把在 "/api" 前面的变成"https://www.vue-js.com/api",这里因为本身就有/api,再添加了一个/api,所以需要去掉一个/api,也就是重写路径。
传递数据(父子组件之间)
组件之间传递数据的方式
1. 正向(向下)传递数据-->父组件给子组件通过自定义属性传递数据,子组件用props接收
2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递,通过$emit("事件名",要传递的数据)自定义监听事件
3.$refs -->获取所有的组件
4.$children 从父组件中获取所有的子组件(获取到的是一个数组)
5.$parent 通过子组件获取父组件
<script>
import OneDemo from './OneDemo.vue';
import TwoDemo from './TwoDemo.vue';
export default {
name:"FuDemo",
data(){
return{
str:"父组件的str"
}
},
components:{
OneDemo,
TwoDemo
},
methods:{
getAll(){
// $refs 获取所有组件
// console.log("父组件中获取所有组件:",this.$refs);
// this.$refs.parentStr.innerHTML = "这是通过$refs获取到节点并修改的数据"
// 获取子组件中的数据并修改
// console.log(this.$refs.one.getData);
// this.$refs.one.str = "在父组件中通过$refs获取到one组件并修改数据";
// 调用子组件中的函数
// this.$refs.one.getData();
// 获取当前父组件中的所有子组件
// console.log(this.$children);
// 修改子组件中的数据
// this.$children[1].str = "通过$children获取到two组件并修改数据"
// console.log(this.$refs.two.$parent);
this.$refs.two.$parent.str = "自己修改自己的数据";
}
}
}
</script>