通过导航栏跳转
点击对应列表项，通过路由进行跳转
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>