对Vue Router 路由管理器的原理及用法的理解与思考（2）

使用路由模块来实现页面跳转的两种方式（router-link标签跳转和JS脚本跳转）

router-link标签跳转

router-link的底层逻辑是创建一个a标签，通过a链接进行跳转。分为带参数和不带参数跳转。

不带参数：

             

带参数：

JS脚本跳转（项目中常用）

借助router实例方法（push,replace,go等），通过编写JS脚本跳转。JS脚本跳转也分为带参数和不带参数跳转。

在vue中，可以通过$router访问路由实例。因此可以调用this.$router.push进行跳转。

（选项式API示例）

（组合式API示例）

组合式API方式需要先使用useRouter,useRoute方法。

vue-router的参数传递方式

（1）字符串方式

（将路由地址以字符串的方式来跳转，这种方法很简单，但是不能传递参数）

（2）对象方式

（主要目的是传递参数）分为两种方式：命名路由和查询参数

1）命名路由：在注册路由的地方通过name给路由命名。

传递参数时通过params传递，例：

这种传递方式在组件中，选项式API和组合式API的使用步骤略有不同，以下分别阐述：

选项式：1.先导入router组件，import  router from ‘vue-router’

               2.再通过this.$route.params获取

组合式：1.先导入 useRoute方法，import {useRoute} from 'vue-router'

              2.useRoute().params.

2)查询参数：在路由地址后面带上参数，和传统的URL参数一致，传递参数必须用query,而且必须配合path来传递参数而不用name，目标页面接收传递的参数使用query.

这种传递方式在组件中，选项式API和组合式API的使用步骤略有不同，以下分别阐述：

选项式：1.先导入router组件，import  router from ‘vue-router’

               2.再通过this.$route.query获取

组合式：1.先导入 useRoute方法，import {useRoute} from 'vue-router'

              2.useRoute().query.

vue-router配置子路由

常见需求示例：在首页顶部有一个用户头像，单击用户头像进入用户中心界面，在用户中心界面包含用户个人信息和用户设置等功能，在个人信息与用户设置间跳转，除了主体内容区域信息不一样外，还保留着用户中心的公共导航模块，这个时候路由结构就是两级的了，用户中心作为父级，个人信息和用户设置的内容区域是二级，这种情况就可以通过vue-router配置子路由的方式切换个人信息页面和用户设置页面。（嵌套路由示例）

第一步：创建一个项目

以Vue Cli 方式创建一个安装了vue-router的项目，改造App.vue根页面。

安装脚手架，创建项目，自定义配置，启动项目

1.npm install -g @vue/cli

2.vue create my-project

3.cd my-project

4.npm run serve

(关键代码及效果图）

第二步：创建单文件组件

功能实现逻辑（关键在于理清父子关系）：创建了一个home.vue作为根组件的子组件，然后又创建了一个index.vue作为home.vue的子组件。最后创建了profile.vue和settings.vue作为index.vue的子组件。

1）在src/views下创建一个user-center文件夹和一个home.vue文件。在根页面放置一个</router-view>,其中home.vue的内容就会渲染到根页面的路由容器中。如图：

2）在user-center中创建三个单文件组件。

第三步：进行路由配置

index.vue是点击home.vue中的user路由跳转到的视图

跳转之后的视图：（默认显示个人信息页面）

点击用户设置，页面展示图：

设置404页面

跟上述步骤差不多，直接看图吧

最后运行项目，随便访问一个地址，可以看到页面跳转到了404页面。