VueRouter路由组件的用法介绍

1.1、<router-link>标签

<router-link>标签的作用是实现路由之间的跳转功能，默认情况下，<router-link>标签是采用超链接<a>标签显示的，通过to属性指定需要跳转的路由地址。当然，如果你不想使用默认的<a>标签，也可以使用tag属性自定义其他的标签。

<router-link>标签中的属性有下面这些：

 注意：<router-link>标签可以在不进行页面刷新的情况下，改变浏览器的URL地址，并触发相应路由的更新，使得<router-view>组件能够渲染与新路由对应的内容。

1.2、<router-view>标签

<router-view>标签的作用是指定路由视图，也就是指定显示具体路由组件的区域，它相当于一个路由区域占位符，当路由切换的时候，会将路由对应的组件内容显示在<router-view>标签所在的位置之上。

需要注意的是，一个<router-view>标签只能显示一层路由，如果在router/index.js文件中存在多级嵌套路由，那么在对应的父路由组件中，也必须使用<router-view>标签，这样才可以将子路由的内容显示到父路由组件中指定的位置。

• 有PageA.vue和PageB.vue组件，App.vue组件中使用了<router-view>标签，那么PageA.vue和PageB.vue组件的内容就会显示在App.vue组件中的<router-view>标签所在位置。

• 现在给PageA.vue组件创建两个子组件，分别是：PageA1.vue和PageA2.vue，并且在router/index.js路由文件中，定义嵌套路由信息。

 

• 接着，要想正确显示PageA1.vue和PageA2.vue子路由的组件内容，那么就必须在PageA.vue父组件中，使用<router-view>标签。

1.3、router对象 

1.3.1、options属性

options属性可以拿到两个对象，分别是history和routes，其中routes对象是当前项目中所有路由信息组成的一个数组，history对象其实就是浏览器中的window.history历史访问记录对象。

router对象中有一个options属性，通过这个options属性可以拿到两个对象，分别是history和routes，其中routes对象是当前项目中所有路由信息组成的一个数组，history对象其实就是浏览器中的window.history历史访问记录对象。

1.3.2、路由跳转

router对象中提供了几个路由跳转的方法，分别是router.push()、router.replace()、router.go()、router.back()、router.forward()这五个方法，其中最常用的是router.push()和router.replace()。

• router.push()方法作用：跳转到指定路由地址，不会替换历史访问记录中的当前路由。举个例子：

  • 假设现在已经访问过A，B，C三个路由，当前处于C路由位置，接下来要使用router.push()跳转到D路由，那么此时新的历史访问记录将变成：A，B，C，D三个路由。

  • 因为D路由会追加到原先的历史记录里面。

• router.replace()方法作用：跳转到指定路由地址，会替换历史访问记录中的当前路由。举个例子：

  • 假设现在已经访问过A，B，C三个路由，当前处于C路由位置，接下来要使用router.replace()跳转到D路由，那么此时新的历史访问记录将变成：A，B，D三个路由。

  • 因为D路由会替换C路由的记录。

• router.go(num)方法作用：前进或者后退num个路由，例如：router.go(2)就是前进2个路由。

• router.back()方法作用：后退1个路由，也就是等价于router.go(-1)的作用。

• router.forward()方法作用：前进1个路由，也就是等价于router.go(1)的作用。

1.3.3、useRoute方法：VueRouter插件中，提供了一个useRoute方法，通过这个useRoute方法可以获取到路由参数等信息。在Vue3中要通过下面方式使用useRoute方法，

// 获取 route 路由
import {useRoute} from "vue-router";
const route = useRoute();

route对象中，具有下面这些属性：

• route.name可以获取到index.js路由配置文件中指定的name属性值。

• route.meta可以获取到index.js路由配置文件中指定的meta属性值，meta是允许用户自定义的属性。

 

• route.query可以获取到路由传递的参数，query参数是显示在浏览器地址栏中的，用户可以看得见。

• route.params可以获取到动态路由传递的参数，params参数会动态替换到路由路径里面。

• route.path可以获取当前访问的路由路径。

• route.fullPath可以获取完整的路由访问路径，也就是地址栏中端口之后的所有内容。

• route.hash可以获取到地址栏中的hash字符串，也就是地址栏中#号之后的所有内容。

1.3.4、动态路由：VueRouter插件还可以支持动态路由，所谓的动态路由，其实就是路由路径中，可以动态的替换参数，动态路由需要在路径中使用【:】冒号定义路由参数。

• 动态路由的定义格式：
   

  {// 动态路由定义格式// 路由路径/:路由参数1/:路由参数2path: 'B/:id/:name',name:'demo_B',component: () => import('../components/demo02/DemoB.vue')
  },

  动态路由的定义格式：其中路由参数是实际传递的参数，需要注意的是，动态路由中的参数必须采用params属性进行传递，一定不能使用query属性，一定不能使用query属性，一定不能使用query属性。

• 通过<router-link>使用动态路由。
   

  <!-- 动态路由 params 中的参数名称，必须和动态路由中配置的相同，这样才可以正确接受到参数
  -->
  <router-link :to="{name:'demo_B',params:{id:1,name:'Tom'}}">B</router-link>

• 通过router.push()方法使用动态路由。
   

  // 动态路由访问
  router.push({name: 'demo_B',params: {id: 1,name: 'Tom'}
  });