### 端口号问题:vue.config.js中devServer中port无效
问题描述:vue项目开发中,用axios请求数据时,用到服务器代理,在vue.config.js中设置服务器代理devServer时,配置 port:3001, 失效。
解决:
第一种方法:修改portfinder版本号:
在node_modules中,依次找到@vue----cli-service----package.json,将 "portfinder": "^1.0.22", 改为 "portfinder": "^1.0.20",
第二种方法:修改port的值:
在node_modules中,依次找到@vue----cli-service----lib----commands----serve.js,将 const port = await portfinder.getPortPromise() 改为 const port = portfinder.basePort
### 组件切换
##### 动态组件
任意标签名加上 is 属性,在当前的位置渲染指定的组件,最好是写成component标签。
component标签开辟一块空间,本身不渲染。
##### 路由
1、监听地址栏的变化
2、根据地址栏的变化切换组件
①安装路由插件:npm install vue-router
②创建路由:src下新建router.js,抛出router实例
```
import Vue from "vue";// 引入vue
import Router from "vue-router";// 引入vue-router
Vue.use(Router);// 使用路由
import Recommend from "./Recommend.vue";// 引入Recommend组件
import Singer from "./Singer.vue";// 引入Singer组件
const router=new Router({// 实例化router对象
mode:"hash",// 使用hash路由,带#号
routes:[// 路由的配置项
{path:"/recommend",component:Recommend},// recommend路径对应Recommend组件
{path:"/singer",component:Singer},// singer路径对应Singer组件
]
});
export default router;// 抛出路由
```
③使用:js的入口文件main.js中引入并使用
```
import router from "./router.js"
// 注册
new Vue({
router:router
})
```
###### 路由的配置项
1、mode 路由模式,hash和history两种。hash:默认,地址栏有#,不需要后端配置;history:地址栏没有#,打包上线(npm run build)的时候,刷新页面会404,此时需要后端配置。
2、path 路由匹配的路径
3、component 当path的路由匹配成功会显示对应的组件
4、children 路由嵌套,一个小型的reutes,值是一个数组,数组中的每一项就是一个二级路由的配置项,它里面的属性和一级路由的配置项属性一致。注意:path不要加 /
5、name 命名路由,path:"/home" 后面加一个 name:"home",用于路由传值时以对象的形式传值
6、meta 路由元信息,每个路由身上携带的信息
7、props 路由解耦,当使用路由解耦时,在配置项中增加 props:true
8、redirect 重定向,{path:"/",redirect:"/home"}
> router-view标签:在根组件App.vue中开辟一块空间,根据地址栏变化显示不同的组件
> router-link标签:点击跳转
推荐
歌手
to:跳往的路径
tag:要渲染成的标签,默认是a标签
activeClass:当前标签添加类名
### 动态导航(路由传参的一种方式)
何时使用?跳转到组件中并且需要传递一个参数时
1、router.js中,申明路由表的时候加上 /:id :{path:"/dongtai/:id",component:Dongtai},
2、地址栏中: http://localhost:3002/#/dongtai 的后面加上 /111(111可以是任意字符)
3、目标组件Dongtai.vue中:mounted生命周期中通过 this.$route.params 可以拿到动态路由传的参数
4、App.vue中,跳转动态导航时传参,动态导航有几级路径上就添加几级:动态导航
### 编程式导航
例如:window.location.href=""
window下history的方法:
window.history.go(1)
window.history.go(-1)
window.history.forward()
window.history.back()
window.history.push()
window.history.replace()
1、go() forward() back() push() 会将新页面保存到页面栈中,有返回键
2、replace() 替换,没有返回
编程式导航:
*this.$router.back() 后退
this.$router.forward() 前进,一般不用
*this.$router.push() 跳转,用的最多
this.$router.go() 指定跳转,一般不用
this.$router.replace() 替换,没有返回,一般不用
场景:列表页跳转到详情页
#### 路由传参的另外两种方式(利用编程式导航)
1、query传值:
this.$router.push({path:"/singer",query:{us:"wql",ps:123}})
通过this.$route.query取值
2、params传值:
this.$router.push({name:"singer",params:{us:"wql",ps:123}})
注意:params传参和path不能同时使用,params表示的就是path,当有path时,params会被忽略。因此需要在路由表中加上name属性:{path:"/singer",name:"singer",component:Singer},
通过this.$route.query取值
### 声明式导航
例如:
场景:tab
### 命名视图
给router-view起一个名字,和组件形成对应关系,在同时渲染不同的组件的时候用到命名视图。
1、渲染多个组件的时候,分别设置一个name属性:
2、路由表中添加一个配置项:
{path:"/nameView",components:{
recommend:Recommend,// name属性的值分别对应相应的组件,那个router-view标签就会只渲染该组件
singer:Singer
}},
### 嵌套路由 children
my页面是在App.vue下的,login和userinfo页面在my页面下,此时需要用到嵌套路由,在路由表中配置children:
{path:"/my",component:My,children:[
{path:"login",component:Login},
{path:"userinfo",component:UserInfo},
]},
注意:children里的path不要加 / ,它相当于一个小型的routes,值是一个数组,属性和一级路由一样。
### 抛出:module.exports={}; 和 export default router; 有什么区别?
配置项相关的,像vue.config.js是通过node来执行的,用node语法抛出,module.exports={};
在写vue代码的时候,它用的是ES6的环境,用ES6的抛出,export default xxx;