一、生命周期（钩子函数）
实例生命周期钩子
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 === false
if(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 === false
if(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 }
}
}
页面跳转到新页面后，点击浏览器返回按钮，回到原页面的原位置。
1292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
