Vue学习(8)-vue-router、Promise的学习

一、vue-router学习

路由的传值

URL： 协议://主机:端口/路径？查询scheme://host:post/path?query#fragment <router-link :to="{path: '/profile'}, query: {name: 'why', age: 18, height: 1.88}">档案</router-link> <h2> {{$route.query}} </h2> <h2> {{$route.query.name}} </h2> <buutton @cilck="profileClick">档案</buutton> data() { return{ userId: 'zhangsan', } } method: { userClick() { this.$router.push('/user/' + this.userId) }, profileClick() { this.$rounter.push({ path: '/profile', query: { name: 'kobe', age: 19, } }) } }

$router和$route的区别

$rouer为VueRouter实例，想要导航到不同url，则使用$router.push$route为当前router跳转对象里可以获取name、path、query、params等。

全局路由守卫

在路由跳转时监听改变网页标题

//index.js { path: '/about', name: 'About', // mate: { // title: 'home' // }, beforeEnter: (to, from, next) => { //路由独享的守卫 next() }, component: About }, //前置守卫（guard） router.beforeEach((to, from, next) => { document.title = to.name, // document.title = to.matched[0].meta.title, next() //调用next方法后，才能进入下一个钩子 }) //后置钩子（hook） router.afterEach((to, from) => { //不需要next() })

组件内的守卫

const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } }

详细可见官网组件内的守卫

vue-router(keep-alive)

通过添加<keep-alive>使被包含的组件保留状态，或避免重新渲染。

//App.vue <keep-alive> <router-view/> </keep-alive> //include和exclude中填字符串或正则表达式 <keep-alive exclude="组件的name,组件的name"> //任何匹配到的组件都不会被缓存 //注意','后不能加空格 </keep-alive> <keep-alive exclude="组件的name,组件的name"> //只有匹配到的组件才会被缓存 </keep-alive>

注意一点：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在

若是因为重定向默认挂载某个组件而无法使用<keep-alive>返回之前的组件：

//Home.vue export default { name: "Home", data() { return { path: '/home/news' } }, // created() { // 创建完毕状态：完成了 data 数据的初始化，el没有 // }, // deactivated() { // 销毁完成状态 // }, activated() { // 组件在激活状态时调用 // console.log('activated'); //返回时push到之前的 this.$router.push(this.path); }, // deactivated() { // 组件被移除时调用 // console.log('deactivated'); // }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 console.log(this.$route.path); // 离开时记录最后活跃的路径名 this.path = this.$route.path; next() } }

文件路径引入问题（别名）

若是有些导入路径太麻烦，import时可以用@/components/。。。来指定从src根目录开始导入，而例如img或style就要用～@/。。。来导入。

style中的scoped的使用

在vue组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。

注意因为App.vue是主容器，不能在其中的style再添加scoped了，若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点的样式的，因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了，不会作用与其他的组件样式。

二、Promise的基本使用

一般情况下是有异步操作时，使用promise对这个一步操作进行封装new -> 构造函数（1.保存了一些状态信息，2.执行传入的函数）在执行传入的回调函数时会传入两个参数，resolve（成功时执行），reject（失败时执行），这两个本身也是函数 new Promise((resolve, reject) => { //假设第一次网络请求 setTimeout(() => { //成功之后调用then()中方法 resolve() //失败后调用catch()中的方法 }, 1000) }).then(() => { console.log('hello 1'); return new Promise((resolve, reject) => { //假设第二次网络请求 setTimeout(() => { //调用之后then()中方法 resolve() }, 1000) }).then(() => { console.log('hello 2'); }) }).catch(() => { console.log('false'); })

Promise的链式调用

new Promise((resolve, reject) => { setTimeout(() => { resolve("aaa") }, 1000) }).then(res => { //1、先自己处理代码 console.log(res, '第一次'); //2、对结果进行第一次处理 return new Promise(resolve => { resolve(res + "111") }).then(res => { console.log(res, '第2次'); //简化一 return Promise.resolve(res + "222"); //要检测错误时 // return Promise.reject(); //或 // throw "err" }).then(res => { console.log(res, '第三次'); //简化二 return res + "333" }).catch(err => { console.log("err") }) })

Promise的all方法使用

//当前两个网络请求都成功时用then new Promise.all([ new Promise(resolve => { setTimeout(() => { resolve('11') }, 1000); }), new Promise(resolve => { setTimeout(() => { resolve('22') }, 1000); }) ]).then(results => { console.log(results); })

主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1