vue-router学习整理-单页面应用的控制中心

路由在单页面应用中是一个很重要的角色，它就是用来切换组件的，因为在单页面应用是没有页面这个概念的，只有一个页面index.html，所以只能通过切换组件来实现类似于跳转到了不同页面的这种效果。

一.路由的基本配置

首先main.js里面引入并注册

在router.js中配置相关项，这里vuecli3已经初始化配置好并演示了两种路由加载方式。

在home.vue这个根组件里编写内容

通过<router-view/>这个标签来展示配置好的路由

此时页面就显示出根路径内容了

二.路由的跳转

• router-link
  
  点击跳转
  已经跳转到相应页面并且地址栏已改变
  
• 编程式导航
  用this.$router.push(路由地址)来实现跳转

三.动态路由

动态路由简单来解释就是，比如有一个商品的详情页，我们通过id的不同来展示不一样的商品页面，此时就需要在url上定义一个参数，用这个参数来获取商品的id，根据id的不同来请求不一样的数据。

首先在router.js里面定义id，这就表明about这个页面是一个需要传入参数的页面，这个参数的名字叫做id

我们可以通过$route.params.id来获取动态参数

这时就获取到了动态路由的参数id的值

通过编程式导航来传参

一：path和query搭配使用


此时就得通过$route.query.name来获取参数

此时就获取到了我们动态传入的参数about

二：name和params搭配使用


此时获取参数就得通过$route.params.id来获取

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

四.嵌套路由

要想在home组件里显示child组件

在router.js进行配置

地址栏输入child可以看到组件child已经显示在home组件里面了