vue.js使用vue-route作为路由

项目目录

项目基于mall-admin-web-master进行开发

https://github.com/macrozheng/mall-admin-web

定义路由

路由文件位置

index.js路由文件

其中，最重要的部分是对于页面文件的路由，定义一个constantRouterMap，其中path为页面文件所在位置，component为所要引用的组件，在这里引用了名为 Layout的组件，redirect为所要跳转的组件路径，name为该路由项名称，其中使用方法之一是 ：

<router-view  name="pms"></router-view>  //渲染pms组件

meta中定义了该路由项的名称和其使用的图标，children中是该路由项下的子路由项，例如：addProduct中引入了@/views/pms/product/add中的模板文件，这样就完成了路由项的定义。

页面跳转逻辑

views/pms

index.vue 点击 新增按钮 通过点击事件 调用 methods 下的handleAddProduct()

handleAddProduct()方法位置

跳转到add.vue

特别注意第二个红框，格式为 冒号值名称-值名称，必须为**-**隔开的全小写字母组成，:is，:is_A，:Is_a都是不可以的 ，一下是Vue.js官方教程上的一段话：

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

add.vue调用了ProductDetail组件，并向product-detail标签传值

ProductDetail组件中相应的product-detail标签与export default{}下props的isEdit属性做绑定

下图是该页面下的export default{}下props的isEdit属性的定义，同样，这个属性名称需要是等价的小驼峰写法，例如：is_open 对应 isOpen，错一点都不能匹配成功

参考文章

浅析vue-router中name的用法 https://blog.csdn.net/weixin_42470791/article/details/82944838

Vue入坑——vue-router的重定向redirect https://my.oschina.net/u/3802541/blog/1811061

Vue: export default中的name属性到底有啥作用呢 https://blog.csdn.net/weixin_39015132/article/details/83573896