前言
本文总结vue-router在实际项目中的使用以及路由传参,组件传参的总结。 Vue的版本为Vue2,因此vue-router的版本也为vue-router3。
Vue-router的使用
Vue-router的基本使用
实际项目中,会在src文件夹下创建一个router文件夹,创建index.js文件作为管理所有路由的文件。
此处为配置路由 从'vue'包里引入Vue,从'vue-router'包里引入VueRouter,然后Vue使用VueRouter插件。接着引入所有需要使用的组件。
默认暴露 new出来的VueRouter实例,里面写routes配置项。
meta表示配置路由元信息,可以在组件中以$route.meta的形式获取使用。
name配置项用于之后路由编程式导航跳转时,用对象写法进行跳转。
component表示使用的组件,path表示路径。
使用嵌套路由时的路径问题
在使用嵌套路由的时候,子路由路径是否加'/'会影响之后的使用。
在main.js中注册路由并使用
引入后在Vue实例下注册,注意router,route,routes之间的区别。
路由组件的实际使用
写一个经典的上中下布局的网站时,一般会有Header和 Footer组件,中间的内容用路由组件来展示。