vue-router笔记

#56 · open · 8 comments

View on GitHub ↗

leftrk

`vue-router`用来构建SPA ``` <router-link></router-link>或者`this.$Router.push({path:""}) <router-view></router-view> ``` router-link 跳转标签 router-view组件渲染

Comments

leftrk

# 动态路由匹配 什么是动态路由? ![image](https://user-images.githubusercontent.com/11362493/76710326-98a97900-6741-11ea-9413-fe1127efadf3.png) GoodsList.vue ``` <span>{{$route.params.goodsId}}</span> ``` ``` localhost:8080/#/goods/sdf89/user/admin ``` ![image](https://user-images.githubusercontent.com/11362493/76710477-cd6a0000-6742-11ea-82b6-00e00f54705f.png) ``` localhost:8080/goods/sdf89/user/admin ``` ![image](https://user-images.githubusercontent.com/11362493/76710504-030ee900-6743-11ea-9ce7-7221fc07c835.png)

leftrk

# 嵌套路由 @ -> src 目录 ![image](https://user-images.githubusercontent.com/11362493/76710561-829cb800-6743-11ea-9796-4e7311638a47.png) 子路由要写绝对地址 ![image](https://user-images.githubusercontent.com/11362493/76710612-e7581280-6743-11ea-97ab-01ec04d0d700.png)

leftrk

# 编程式路由 ![image](https://user-images.githubusercontent.com/11362493/76710633-0b1b5880-6744-11ea-95c8-2a329a3d906d.png) ![image](https://user-images.githubusercontent.com/11362493/76710663-5b92b600-6744-11ea-9db7-2e9af1affd31.png) ![image](https://user-images.githubusercontent.com/11362493/76710677-706f4980-6744-11ea-9c48-77be10cb48b2.png) 非params,组件和组件之间

leftrk

# 命名路由和命名视图 什么是命名路由和命名视图? - 给路由定义不同的名字,根据名字进行匹配 - 给不同的 router-view定义名字,通过名字进行对应组件的渲染 ![image](https://user-images.githubusercontent.com/11362493/76710719-c80db500-6744-11ea-8ab2-9ca7978d162c.png) 必须使用`v- bind:to` ![image](https://user-images.githubusercontent.com/11362493/76710757-0905c980-6745-11ea-9ff6-80dd4a5e8cbe.png) ![image](https://user-images.githubusercontent.com/11362493/76710783-2f2b6980-6745-11ea-9ec7-17aaf2e310a9.png)

leftrk

# vue-Resource基础介绍 ![image](https://user-images.githubusercontent.com/11362493/76710843-afea6580-6745-11ea-932d-03f6b953baa6.png) ![image](https://user-images.githubusercontent.com/11362493/76710935-7108df80-6746-11ea-98f1-79d7bf4805ee.png) ![image](https://user-images.githubusercontent.com/11362493/76710989-d2c94980-6746-11ea-800b-34f05903a1b3.png)

leftrk

![image](https://user-images.githubusercontent.com/11362493/76711073-c72a5280-6747-11ea-9667-fae2305529b7.png) ![image](https://user-images.githubusercontent.com/11362493/76711095-fa6ce180-6747-11ea-8315-e1d92dc90768.png)

leftrk

# axios基础介绍 ![image](https://user-images.githubusercontent.com/11362493/76711153-62232c80-6748-11ea-99ed-98bbb5a9d83b.png) ![image](https://user-images.githubusercontent.com/11362493/76711162-72d3a280-6748-11ea-9839-c84ece5b2c42.png) 并没有引入页面,只是暴露一个全局变量 ![image](https://user-images.githubusercontent.com/11362493/76711226-f42b3500-6748-11ea-995a-2b3891196872.png)

leftrk

第二个直接是数据,第三个参数是选项 ![image](https://user-images.githubusercontent.com/11362493/76711248-3785a380-6749-11ea-8e93-baffb91cd16b.png) ![image](https://user-images.githubusercontent.com/11362493/76711264-63088e00-6749-11ea-95db-b096adea16d7.png) 全局拦截 ![image](https://user-images.githubusercontent.com/11362493/76711304-b24ebe80-6749-11ea-980f-578e0ccdcf18.png)