vue使用

该标签会根据当前的路径&＃xff0c;动态渲染出不同的组件

将路由器改为history模式&＃xff0c; mode&＃xff1a;&＃39;history&＃39;

&＃61;>a标签

渲染成任何属性

repalce &＃xff1a;replace 不会留下history记录。所以指定repalce的情况下&＃xff0c;后退键返回不能返回到上一个页面中。

this.$router.push&＃xff08;&＃39;/home&＃39;&＃xff09;

路由懒加载

const Home &＃61;()&＃61;>import(&＃39;../components/Home.vue&＃39;)

path&＃xff1a;&＃39; /home/&＃xff1a;id&＃39;

{{this.$route.params.id}}

url &＃xff1a;协议&＃xff1a;//主机&＃xff1a;端口/路径&＃xff1f;查询&＃xff08;query&＃xff09;

传递参数主要有两种类型&＃xff1a;params 和query

params的类型

配置路由格式&＃xff1a;/router/:id

传递的方式&＃xff1a;在path后面跟上对应的值

传递后形成的路径&＃xff1a;/router/123&＃xff0c;/router/abc

query的类型&＃xff1a;

配置路由格式&＃xff1a;/router&＃xff0c;也就是普通配置

传递的方式&＃xff1a;对象中使用query的key 作为传递方式

传递后形成的路径&＃xff1a;/router&＃xff1f;id&＃61;123&＃xff0c;/router&＃xff1f;id&＃61;abc

导航守卫的使用&＃xff1f;

router.beforeEach&＃xff08;to&＃xff0c;from&＃xff0c;next&＃xff09;&＃61;》

{window.document.title &＃61; to.meta.title

}

keep-alive 是Vue内置的一个组件&＃xff0c;可以使被包含的组件保留状态&＃xff0c;

他有两个非常重要的属性

include&＃xff1a;字符串式正则表达&＃xff0c;只有匹配的组件会被缓存

exclude&＃xff1a;任何匹配的组件都不会被缓存

box- shadow的使用

ue-router 路由重复点击 报错

2021.03.25 18:18:38字数 159阅读 1,290

报错如图

报错&＃xff1a;
vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home".

通过$router.push()的方式跳转路由时&＃xff0c;路由重复点击会报错&＃xff0c;虽然不影响功能使用&＃xff0c;但是总会有些不合适&＃xff0c;强迫症很难受。

解决办法&＃xff1a;

有两种解决办法&＃xff1a;

1.在router的配置文件index.js中&＃xff0c;加入如下代码&＃xff1a;

//router/index.jsimport Router from "vue-router"const originalPush &＃61; Router.prototype.push
Router.prototype.push &＃61; function push(location) {return originalPush.call(this, location).catch(err &＃61;> err)
}


2.在调用$router.push()时&＃xff0c;后边接一个catch&＃xff1a;

this.$router.push({}).catch(err &＃61;> {})


除了push以外&＃xff0c;replace也可以使用类似方式&＃xff0c;这里就不列举了。

如果觉得有用就帮忙点个赞吧&＃xff01;

ue-router 路由重复点击 报错

报错如图

报错&＃xff1a;
vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home".

通过$router.push()的方式跳转路由时&＃xff0c;路由重复点击会报错&＃xff0c;虽然不影响功能使用&＃xff0c;但是总会有些不合适&＃xff0c;强迫症很难受。

解决办法&＃xff1a;

有两种解决办法&＃xff1a;

1.在router的配置文件index.js中&＃xff0c;加入如下代码&＃xff1a;

//router/index.jsimport Router from "vue-router"const originalPush &＃61; Router.prototype.push
Router.prototype.push &＃61; function push(location) {return originalPush.call(this, location).catch(err &＃61;> err)
}


2.在调用$router.push()时&＃xff0c;后边接一个catch&＃xff1a;

this.$router.push({}).catch(err &＃61;> {})


除了push以外&＃xff0c;replace也可以使用类似方式&＃xff0c;这里就不列举了。

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;/* 任意数量的阴影&＃xff0c;以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

new promise((resolve,reject) &＃61;> {setTimeout(()&＃61;>{resolve()},1000)
}).then((
)&＃61;>{console.log("hello world");
})

一般情况下是有异步操作时&＃xff0c;使用promise 对这个异步操作进行封装

new promise((resolve,reject) &＃61;> {setTimeout(()&＃61;>{resolve("hello world")reject(&＃39;error message&＃39;)},1000)
}).then(data&＃61;>{},error &＃61;> {})

//resolve, reject 接受成功或失败