路由之间的跳转方式有哪些声明式_vue06----portfinder、组件切换（动态组件、路由）、路由的配置项、router-view、router-link、动态导航（params）、编程式导航、...

### 端口号问题：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;