diff --git a/docs/vue.md b/docs/vue.md index 400e141..ebbc2e1 100644 --- a/docs/vue.md +++ b/docs/vue.md @@ -723,133 +723,161 @@ const value = inject(ProvideKey) ## 路由 -### 1.路由的基本使用 +### 1. 路由的基本使用 -1.开启命名空间后,组件中读取state数据: +#### 开启命名空间后,组件中读取state数据 + +方式一:自己直接读取 ```javascript -//方式一:自己直接读取 this.$store.state.personAbout.list - -//方式二:借助mapState读取: -...mapState('countAbout',['sum','school','subject']), ``` -2.开启命名空间后,组件中读取getters数据: +方式二:借助 mapState 读取: + +```js +...mapState('countAbout',[ + 'sum','school','subject' +]), +``` + +#### 开启命名空间后,组件中读取getters数据 + +方式一:自己直接读取 ```javascript -//方式一:自己直接读取 -this.$store.getters['personAbout/firstPersonName'] -//方式二:借助mapGetters读取: +this.$store.getters[ + 'personAbout/firstPersonName' +] +``` + +方式二:借助 mapGetters 读取: + +```js ...mapGetters('countAbout',['bigSum']) ``` -3.开启命名空间后,组件中调用dispatch +#### 开启命名空间后,组件中调用dispatch + +方式一:自己直接 dispatch ```javascript -//方式一:自己直接dispatch -this.$store.dispatch('personAbout/addPersonWang',person) -//方式二:借助mapActions: -...mapActions('countAbout',{incrementOdd:'jia0dd',incrementWait:'jiaWait'}) +this.$store.dispatch( + 'personAbout/addPersonWang', person +) ``` -4.开启命名空间后,组件中调用commit +方式二:借助mapActions: + +```js +...mapActions('countAbout',{ + incrementOdd:'jia0dd', + incrementWait:'jiaWait' +}) +``` + +#### 开启命名空间后,组件中调用commit + +方式一:自己直接 commit ```javascript -//方式一:自己直接commit -this.$store.commit('personAbout/ADD_PERSON',person) -//方式二:借助mapMutations: -...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}), +this.$store.commit( + 'personAbout/ADD_PERSON', person +) ``` -### 2.路由的使用 +方式二:借助 mapMutations: + +```js +...mapMutations('countAbout', { + increment:'JIA',decrement:'JIAN' +}), +``` + +### 2. 路由的使用 ```javascript import VueRouter from 'vue-router' -//引入Luyou 组件 +// 引入Luyou 组件 import About from '../components/About' import Home from '../components/Home' -//创建router实例对象,去管理一组一组的路由规则 +// 创建router实例对象,去管理一组一组的路由规则 const router = new VueRouter({ - routes:[ - path:'/about', - component:About - path:'/home', - component:Home + routes: [ + path: '/about', + component: About + path: '/home', + component: Home + ] }) -//暴露router +// 暴露 router export default router ``` -4.实现切换(active-class可配置高亮样式) +实现切换(active-class可配置高亮样式) -\<router-link active-class="active" to="/about">About\</router-link> +```html +<router-link + active-class="active" + to="/about"> + About +</router-link> +``` -5.指定展示位置 +指定展示位置 -\<router-diew>\</router-view> +```html +<router-diew></router-view> +``` ->几个注意点 -> ->1.路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。 -> ->2.通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。 -> ->3.每个组件都有自己的$route属性,里面存储着自己的路由信息。 -> ->4.整个应用只有一个router,可以通过组件的srouter 属性获取到。 +几个注意点 + +- 路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。 +- 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。 +- 每个组件都有自己的$route属性,里面存储着自己的路由信息。 +- 整个应用只有一个router,可以通过组件的srouter 属性获取到。 +<!--rehype:className=style-list-arrow--> ### 3.路由的query ```html <template> - <div> - <ul class="list"> - <!-- 跳转路由并携带参数 --> - <!-- <li v-for="item of data" :key="item.id"> - <router-link + <div> + <ul class="list"> + <!-- to的对象写法 --> + <li v-for="item of data" :key="item.id"> + <router-link class="link" - :to="`/home/message/mes?id=${item.id}&title=${item.mes}`" - >{{item.mes}}</router-link> --> - <!-- to的对象写法 --> - <li v-for="item of data" :key="item.id"> - <router-link - class="link" - :to="{ - path:'/home/message/mes', - query:{ - id:item.id, - title:item.mes - } - }" - >{{item.mes}}</router-link> - </li> - </ul> - <hr> - <router-view></router-view> - </div> + :to="{ + path:'/home/message/mes', + query: { id:item.id, title:item.mes } + }" + >{{item.mes}}</router-link> + </li> + </ul> + <hr> + <router-view></router-view> + </div> </template> <script> export default { name:'HomeChild1', data() { - return { + return { data:[ {id:1,mes:"消息1"}, {id:2,mes:"消息2"}, {id:3,mes:"消息3"} ] - } + } }, } </script> <style scoped> - .list{ - margin-left:80px; - } - .link{ + .list { margin-left:80px; } + .link{ color: orange; text-decoration: none; background-color: skyblue; @@ -857,59 +885,57 @@ export default { </style> ``` -> 接收参数 `{{$route.query.id}}` +> 接收参数 `{{$route.query.id}}` -### 4.命名路由 - -```javascript - routes:[ - { - path:'/about', - component:AboutBody - }, - { - path:'/home', - component:HomeBody, - children:[ - { - path:'news', - component:HomeChild - }, - { - path:'message', - component:HomeChild1, - //多级路由 - children:[ - { - name:'richu', - path:'mes', - component:HomeMessage - } - ] - } - ] - } - ] +#### 跳转路由并携带参数 +```html +<li v-for="item of data" :key="item.id"> + <router-link + class="link" + :to="`/home/message/mes?id=${item.id}&title=${item.mes}`" + > + {{item.mes}} + </router-link> +</li> ``` -> 使用 -> -> :to="{ -> name:'', -> path:'/home/message/mes', -> -> query:{id:item.id, -> -> title:item.mes -> -> } -> -> }" +### 4. 命名路由 + +```javascript +routes:[ + { path:'/about', component:AboutBody }, + { + path:'/home', + component:HomeBody, + children:[ + { path:'news', component:HomeChild }, + { + path:'message', + component:HomeChild1, + //多级路由 + children:[ + { name:'richu', path:'mes', component:HomeMessage } + ] + } + ] + } +] +``` + +使用 + +```html +<router-link :to="{ + name:'', + path:'/home/message/mes', + query:{ id:item.id,title:item.mes } +}"> +``` ### 5.params参数的使用 -1.声明接收 +#### 1. 声明接收 ```javascript children:[ @@ -921,19 +947,19 @@ children:[ ] ``` -2.传递 +#### 2. 传递 ```html <li v-for="item of data" :key="item.id"> <router-link - class="link" - :to="`/home/message/mes/${item.id}/${item.mes}`" - >{{item.mes}} + class="link" + :to="`/home/message/mes/${item.id}/${item.mes}`" + >{{item.mes}} </router-link> </li> ``` -3.接收 +#### 3. 接收 ```html <li>编号{{$route.params.id}}</li> @@ -942,47 +968,50 @@ children:[ ### 6.props的使用 -```javascript -7.路由的props配置 +路由的props配置 + +```js +{ + name: 'xiangqing', + path:'detail/:id', + component:Detail +} +``` + 作用:让路由组件更方便的收到参数 -name:'xiangqing',path:'detail/:id',component:Detail, + +```javascript //第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detai1组件 // props:{a:900] //第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detai1组件 // props:true //第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件 props(route){ -return { -id:route.query.id, -title:route.query.title + return { + id:route.query.id, + title:route.query.title + } +} ``` -> \<router-link>的replace属性 -> -> 1.作用:控制路由跳转时操作浏览器历史记录的模式 -> -> 2.浏览器的历史记录有两种写入方式:分别为 push和replace,默认为push -> -> 3.如何开启replace 模式: -> -> push是追加历史记录, -> -> replace 是替换当前记录[路由跳转时候\<router-link replace>News\</router-link>] +\<router-link> 的 replace 属性 -### 7.编程式路由导航 +1. 作用:控制路由跳转时操作浏览器历史记录的模式 +2. 浏览器的历史记录有两种写入方式:分别为 push和replace,默认为push +3. 如何开启replace 模式: `push` 是追加历史记录,`replace` 是替换当前记录[路由跳转时候 `<router-link replace>News\</router-link>`] -1.作用:不借助router-link实现路由跳转,让跳转更加灵活 -2.具体编码: +### 7. 编程式路由导航 + +作用:不借助router-link实现路由跳转,让跳转更加灵活 ```javascript -//$router的两个API this.$router.push({ name:'xiangqing', params:{ - id:xxx, - title:xxx - //实现路由跳转,让路由跳转更加灵活 - } + id: xxx, + title: xxx + // 实现路由跳转,让路由跳转更加灵活 + } }) this.$router.replace({ name:'xiangqing', @@ -998,9 +1027,7 @@ this.$router.go(3); ### 8.缓存路由组件 -> 让不展示的路由组件保持挂载,不被销毁 - -> 具体编码 +让不展示的路由组件保持挂载,不被销毁,示例: ```html <keep-alive include="news"> @@ -1008,22 +1035,20 @@ this.$router.go(3); </keep-alive> ``` -> include里面写模块名,用于保存指定的模块 +- `include` 里面写模块名,用于保存指定的模块 ### 9.新生命周期钩子 > 作用:路由组件独有的,用于捕获路由组件的激活状态 -activated 路由组件被激活时触发 - -deactivated 路由组件失活时触发 +- `activated` 路由组件被激活时触发 +- `deactivated` 路由组件失活时触发 ## 路由守卫 -#### 1.前置路由守卫 +### 1.前置路由守卫 ```javascript -/* 前置路由 */ route.beforeEach((from,to,next)=>{ if (to.meta.isAuth){ alert("1"); @@ -1034,17 +1059,20 @@ route.beforeEach((from,to,next)=>{ }) ``` -#### 2.后置路由守卫 +前置路由 + +### 2.后置路由守卫 ```javascript -/* 后置路由 */ route.afterEach((from,to)=>{ console.log(to); document.title=from.meta.title; }) ``` -#### 3.独享路由守卫 +后置路由 + +### 3.独享路由守卫 ```javascript { @@ -1057,21 +1085,25 @@ route.afterEach((from,to)=>{ }, ``` -> 独享路由守卫只有前置路由守卫没有后置路由守卫 +独享路由守卫只有前置路由守卫没有后置路由守卫 -#### 4.组件内路由守卫 +### 4.组件内路由守卫 + +通过路由规则,进入该组件时被调用 ```javascript -/* 通过路由规则,进入该组件时被调用 */ beforeRouteEnter (to, from, next) { // ... -}, -/* 通过路由规则,离开组件时被调用 */ -beforeRouteLeave (to, from, next) { - // ... } ``` +通过路由规则,离开组件时被调用 + +```js +beforeRouteLeave (to, from, next) { + // ... +} +``` Vue 中使用 TypeScript ---