vue基础学习记录（三）

一、生命周期（钩子函数）

实例生命周期钩子

 new Vue ({beforeCreate:function(){alert("组件实例化之前执行的函数");},created:function(){alert("组件实例化完毕，但页面还未显示");},beforeMount:function(){alert("组件挂载前，页面仍未显示，但虚拟Dom已经配置");},mounted:function(){alert("组件挂载后，此方法执行后，页面显示");},beforeUpdate:function(){alert("组件更新前，页面仍未更新，但虚拟Dom已经配置");},updated:function(){alert("组件更新后，此方法执行后，页面显示");},beforeDestory:function(){alert("组件销毁前")},destoryed:function(){alert("组件销毁")}  });

生命周期图示

二、路由和Http

实现简单的路由和Http

安装路由模块

 $npm install vue-router --save-dev

安装vue-resource模块

 $npm install vue-resource--save-dev

例子在线数据来源于jsonplaceholder
案例源码提取码：wesw

三、搭建脚手架

新建更简洁的项目

 $ vue init webpack-simple pizza-app

运行项目

 $ cd pizza-app           // 进入项目目录$ npm install          // 安装依赖$ npm run dev           // 运行

四、路由小细节

1、router-link加tag属性，改变渲染类型

当tag等于div，渲染结果是 li 标签里面包裹着div

 <li><router-link tag="div" to="/" class="nav-link">主页</router-link></li>

2、如果没有匹配任何路由，进入到主页

输入路径错误的时候，跳转到主页，起引导作用

 {path:'*',redirect:'/'}

3、给路由绑定动态地址

这样写的好处是可以通过逻辑动态更改路由地址

 <li><router-link :to="homeLink" class="nav-link">主页</router-link></li><script>export default {data() {return {homeLink:'/'}},}</script>

4、路由name属性及跳转方法

给路由取名字

 <template><header><ul class="navbar-nav"><li><router-link :to="{name:'homeLink'}" class="nav-link">主页</router-link></li><li><router-link :to="{name:'menuLink'}" class="nav-link">菜单</router-link></li><li><router-link :to="{name:'adminLink'}" class="nav-link">管理</router-link></li><li><router-link :to="{name:'aboutLink'}" class="nav-link">关于我们</router-link></li></ul><ul class="navbar-nav ml-auto"><li><router-link :to="{name:'loginLink'}" class="nav-link">登录</router-link></li><li><router-link :to="{name:'registerLink'}" class="nav-link">注册</router-link></li></ul></nav>   </header></template>

路径上加上name属性和值

 const routes = [{path:'/',name:'homeLink',component:Home},{path:'/menu',name:'menuLink',component:Menu},{path:'/admin',name:'adminLink',component:Admin},{path:'/about',name:'aboutLink',component:About},{path:'/login',name:'loginLink',component:Login},{path:'/register',name:'registerLink',component:Register},]

路由跳转的几种方式
跳转到Menu页面

 goToMenu(){// 跳转到上一次浏览的页面this.$router.go(-1)// 指定跳转地址this.$router.replace('/menu')// 指定跳转路由的名字下this.$router.replace({name:'menuLink'})// 通过push进行跳转（常用）this.$router.push('/menu')this.$router.push({name:'menuLink'})}

五、二级路由和三极路由

about.vue

 <template><div><div class="row mb-5"><div class="col-4"><!-- 导航 --><div class="list-group mb-5"><router-link tag="li" class="nav-link" :to="{name:'historyLink'}"><a class="list-group-item list-group-item-action">历史订单</a></router-link><router-link tag="li" class="nav-link" :to="{name:'contactLink'}"><a class="list-group-item list-group-item-action">联系我们</a></router-link><router-link tag="li" class="nav-link" :to="{name:'orderingGuideLink'}"><a class="list-group-item list-group-item-action">点餐文档</a></router-link><router-link tag="li" class="nav-link" :to="{name:'deliveryLink'}"><a class="list-group-item list-group-item-action">快递信息</a></router-link></div></div><div class="col-8"><!-- 导航所对应的内容 --><router-view></router-view></div></div></div></template>

main.js

 import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'import Home from './components/Home'import Menu from './components/Menu'import Admin from './components/Admin'import About from './components/About/About'import Login from './components/Login'import Register from './components/Register'// 二级路由import Contact from './components/about/Contact'import Delivery from './components/about/Delivery'import History from './components/about/History'import OrderingGuide from './components/about/OrderingGuide'// 三级路由import Phone from './components/about/contact/Phone'import PersonName from './components/about/contact/PersonName'Vue.use(VueRouter)const routes = [{path:'/',name:'homeLink',component:Home},{path:'/menu',name:'menuLink',component:Menu},{path:'/admin',name:'adminLink',component:Admin},{path:'/about',name:'aboutLink',redirect:'/about/contact',component:About,children:[   // 给对应的路径加上 children就可以配置二级路由，多级路由原理相同{path:'/about/contact',name:"contactLink",redirect:'/personname',component:Contact,children:[{path:'/phone',name:"phoneNumber",component:Phone},{path:'/personname',name:"personName",component:PersonName}]},{path:'/history',name:"historyLink",component:History},{path:'/delivery',name:"deliveryLink",component:Delivery},{path:'/orderingGuide',name:"orderingGuideLink",component:OrderingGuide},]},{path:'/login',name:'loginLink',component:Login},{path:'/register',name:'registerLink',component:Register},{path:'*',redirect:'/'}]const router = new VueRouter({routes,mode: 'history',})new Vue({el: '#app',router,render: h => h(App)}

给对应的路径加上 children就可以配置二级路由，多级路由原理相同；给路径加上redirect可以指定默认显示内容

六、导航守卫（全局守卫）

 // 全局守卫router.beforeEach((to,form,next) => {// alert("还没有登录请先登陆!");// next();console.log(to)// 判断 store.gettes.isLogin === falseif(to.path == '/login' || to.path == '/register'){next();}else{alert("还没有登录,请先登陆!");next('/login');}})

功能：登录和注册页面可以正常点击，点击其他页面将跳转到登录页面

效果截图

七、导航守卫（路由独享-组件内守卫）

后置钩子

 // 后置钩子router.afterEach((to,from) =>{alert("after each");})

路由独享守卫

直接在路由后面加上beforeEnter，只会对当前路由有效

 {path:'/admin',name:'adminLink',component:Admin,beforeEnter: (to, from, next) => {// 路由独享守卫alert("非登录状态,不能访问此页面!");next(false);// 判断 store.gettes.isLogin === falseif(to.path == '/login' || to.path == '/register'){next();}else{alert("还没有登录,请先登陆!");next('/login');}}},

组件内的守卫

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

进入路由

  data() {return {name: "Henry"};},beforeRouteEnter (to, from, next) {//   alert.log("Hello " + this.name);   // 这样会报错//   next();next(vm =>{alert("Hello " + vm.name)     // 通过回调可以拿到name的值})}

退出路由

  beforeRouteLeave(to, from, next) {if(confirm("确定离开吗?") == true){next()  }else{next(false)}}

八、复用router-view

1、由代码抽离

新建一个文件routes.js,把所有的路由引入文件代码，和配置都复制过来，在const前面加上export

routes.js

 import Home from './components/Home'import Menu from './components/Menu'import Admin from './components/Admin'import About from './components/About/About'import Login from './components/Login'import Register from './components/Register'// 二级路由import Contact from './components/about/Contact'import Delivery from './components/about/Delivery'import History from './components/about/History'import OrderingGuide from './components/about/OrderingGuide'// 三级路由import Phone from './components/about/contact/Phone'import PersonName from './components/about/contact/PersonName'export const routes = [{path:'/',name:'homeLink',component:Home},{path:'/menu',name:'menuLink',component:Menu},{path:'/admin',name:'adminLink',component:Admin},{path:'/about',name:'aboutLink',redirect:'/about/contact',component:About,children:[{path:'/about/contact',name:"contactLink",redirect:'/personname',component:Contact,children:[{path:'/phone',name:"phoneNumber",component:Phone},{path:'/personname',name:"personName",component:PersonName}]},{path:'/history',name:"historyLink",component:History},{path:'/delivery',name:"deliveryLink",component:Delivery},{path:'/orderingGuide',name:"orderingGuideLink",component:OrderingGuide},]},{path:'/login',name:'loginLink',component:Login},{path:'/register',name:'registerLink',component:Register},{path:'*',redirect:'/'}]

在main.js文件加入这行代码就引入成功了

main.js

 import { routes } from './routes'

2、router-view复用

给router-view加上name值就可以实现复用

App.vue

 <div class="container"><div class="row"><div class="col-sm-12 col-md-4"><router-view name="orderingGuide"></router-view></div><div class="col-sm-12 col-md-4"><router-view name="delivery"></router-view></div><div class="col-sm-12 col-md-4"><router-view name="history"></router-view></div></div></div>

在主页复用 关于我们 的三个路由

routes.js

 {path:'/',name:'homeLink',components:{default:Home,'orderingGuide':OrderingGuide,'delivery':Delivery,'history':History}}

效果截图

九、控制滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。

 scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0 }  // return 期望滚动到哪个的位置}

对于所有路由导航，简单地让页面滚动到顶部。

返回 savedPosition，在按下后退/前进按钮时，就会像浏览器的原生表现那样：

 scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { x: 0, y: 0 }}}

页面跳转到新页面后，点击浏览器返回按钮，回到原页面的原位置。