项目中Vue-router的使用以及路由传参,组件传参的总结

256 阅读1分钟

前言

本文总结vue-router在实际项目中的使用以及路由传参,组件传参的总结。 Vue的版本为Vue2,因此vue-router的版本也为vue-router3。

Vue-router的使用

Vue-router的基本使用

实际项目中,会在src文件夹下创建一个router文件夹,创建index.js文件作为管理所有路由的文件。

image.png 此处为配置路由 从'vue'包里引入Vue,从'vue-router'包里引入VueRouter,然后Vue使用VueRouter插件。接着引入所有需要使用的组件。

image.png

默认暴露 new出来的VueRouter实例,里面写routes配置项。 meta表示配置路由元信息,可以在组件中以$route.meta的形式获取使用。
name配置项用于之后路由编程式导航跳转时,用对象写法进行跳转。 component表示使用的组件,path表示路径。

使用嵌套路由时的路径问题

在使用嵌套路由的时候,子路由路径是否加'/'会影响之后的使用。

image.png

image.png

在main.js中注册路由并使用

image.png 引入后在Vue实例下注册,注意router,route,routes之间的区别。

路由组件的实际使用

image.png 写一个经典的上中下布局的网站时,一般会有Header和 Footer组件,中间的内容用路由组件来展示。

路由传参的方法

字符串写法

image.png

对象写法

image.png

指定params参数可传可不传

image.png

路由组件传递props数据

image.png

image.png