Vue实例生命周期
vue生命周期之beforeCreate
实例创建之前除标签外,所有的vue需要的数据,事件都不存在
vue生命周期之created
实例创建之后,data和事件已经被解析到,el还没有找到
vue生命周期之beforeMount
开始找标签,数据还没有被渲染,事件也没有被监听
vue生命周期之mounted
开始渲染数据,开始监听事件
vue生命周期之beforeUpdata
数据已经被修改在虚拟DOM,但没有被渲染到页面上
vue生命周期之updata
开始使用Diff算法,将虚拟DOM中的修改应用大页面上,此时真实DOM中数据被修改
vue生命周期之beforeDestory
所有的数据都存在
vue生命周期之destory
所有的数据都有(虚拟DOM中找)
<keep-alive></keep-alive>vue提供的用来缓存被消除的标签
用activated和deactivated取代了beforeUpdate和destory的执行
vueRoter
实现原理
<div id=‘app‘> <a href="#/login">登录</a> <a href="#/register">注册</a></div><script> let oDiv = document.getElementById(‘#app‘); window.onhashchange = function(){ switch (location.hash){ case ‘#/login‘: oDiv.innerHTML = `<h1>这是登录</h1>`; break; case ‘#/register‘: oDiv.innerHTML = `<h1>这是注册</h1>`; break; } }</script>安装使用
// 直接下载安装 vue-router.js 地址:https://router.vuejs.org/zh/installation.html<div id="app">?</div>?<script> // 第一步,在vue根实例中使用VueRouter Vue.use(VueRouter);? let Home = { template: `<div><h1>这是主页面</h1></div>` }; let Login = { template: `<div><h1>这是登录页面</h1></div>` }; let Register = { template: `<div><h1>这是注册页面</h1></div>` };? let App = { // 第四步 // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径 // 第五步 // router-view页面内容的渲染出口 template: `<div> <router-link to=‘/‘>首页</router-link> <router-link to=‘/login‘>登录</router-link> <router-link to=‘/register‘>注册</router-link> <router-view></router-view> </div>`,? }; // 第二步,创建VueRouter对象 // 本质上是将路径和页面内容绑定了对应关系 let router = new VueRouter({ routes: [ // 对应关系 { path: ‘/‘, component: Home, }, { path: ‘/login‘, component: Login, }, { path: ‘/register‘, component: Register, }, ] }); new Vue({ el: ‘#app‘, // 第三步,在根实例中注册router对象 router: router, template: ‘<App/>‘, components: { App, } })</script>命名路由
<div id="app"></div>?<script> // 第一步,在vue根实例中使用VueRouter Vue.use(VueRouter);? let Home = { template: `<div><h1>这是主页面</h1></div>` }; let Login = { template: `<div><h1>这是登录页面</h1></div>` }; let Register = { template: `<div><h1>这是注册页面</h1></div>` };? let App = { // 第四步 // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径 // 第五步 // router-view页面内容的渲染出口 template: `<div> <router-link :to=‘{name: "home"}‘>首页</router-link> <router-link :to=‘{name: "login"}‘>登录</router-link> <router-link :to=‘{name: "register"}‘>注册</router-link> <router-view></router-view> </div>`,? }; // 第二步,创建VueRouter对象 // 本质上是将路径和页面内容绑定了对应关系 let router = new VueRouter({ routes: [ // 对应关系 { name: ‘home‘, path: ‘/‘, component: Home, }, { name: ‘login‘, path: ‘/login‘, component: Login, }, { name: ‘register‘, path: ‘/register‘, component: Register, }, ] }); new Vue({ el: ‘#app‘, // 第三步,在根实例中注册router对象 router: router, template: ‘<App/>‘, components: { App, } })</script>路由参数的实现
<script> // 之真实的场景中,xxx/1 带有参数 // 第一步,在vue根实例中使用VueRouter Vue.use(VueRouter); let Home = { template: `<div><h1>这是主页面</h1></div>` }; let userParams = { template: `<div><h1>这是用户一的信息</h1></div>` }; let userParams = { template: `<div><h1>这是用户二的信息</h1></div>` }; let App = { // 第四步 // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径 // 第五步 // router-view页面内容的渲染出口 template: `<div> <router-link :to=‘{name: "home"}‘>首页</router-link> <router-link :to=‘{name: "userParams", params: {userId: 1}}>登录</router-link> <router-link :to=‘{name: "userQuery", query: {userId: 2}}‘>注册</router-link> <router-view></router-view> </div>`, }; // 第二步,创建VueRouter对象 // 本质上是将路径和页面内容绑定了对应关系 let router = new VueRouter({ routes: [ // 对应关系 { name: ‘hoem‘, path: ‘/‘, component: Home, }, { // xxx/1 name: ‘userParams‘, path: ‘/user/:userId‘, component: userParams, }, { //xxx/?userId=1 name = ‘userQuery‘, path: ‘/user‘, compontennt: userQuery, } ] }) new Vue({ el: ‘#app‘, // 第三步,在根实例中注册router对象 router: router, components: { App, } })</script>路由参数的实现原理
<div id="app"></div>?<script> // 之真实的场景中,xxx/1 带有参数 // 第一步,在vue根实例中使用VueRouter Vue.use(VueRouter);? let Home = { template: `<div><h1>这是主页面</h1></div>`, mounted(){ console.log(this.$route); } }; let userParams = { template: `<div><h1>这是用户一的信息</h1></div>`, mounted(){ console.log(this.$route); } }; let userQuery = { template: `<div><h1>这是用户二的信息</h1></div>` };?let App = { // 第四步 // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径 // 第五步 // router-view页面内容的渲染出口 template: `<div> <router-link :to=‘{name: "home"}‘>首页</router-link> <router-link :to=‘{name: "userParams", params: {userId: 1}}‘>登录</router-link> <router-link :to=‘{name: "userQuery", query: {userId: 2, id: 1, ss: 4}}‘>注册</router-link> <router-view></router-view> </div>`,? }; // 第二步,创建VueRouter对象 // 本质上是将路径和页面内容绑定了对应关系 let router = new VueRouter({ routes: [ // 对应关系 { name: ‘home‘, path: ‘/‘, component: Home, }, { // xxx/1 name: ‘userParams‘, path: ‘/user/:userId‘, component: userParams, }, { //xxx/?userId=2 name : ‘userQuery‘, path: ‘/user‘, component: userQuery, } ] }); new Vue({ el: ‘#app‘, template: `<App/>`, // 第三步,在根实例中注册router对象 router: router, components: { App, } })</script>子路由
<div id="app"></div>?<script> // 第一步,在vue根实例中使用VueRouter Vue.use(VueRouter);? let Home = { template: `<div><h1>这是主页面</h1></div>`, }; let Courses = { template: `<div><h1>这是课程页面</h1> <router-link to=‘/courses/lightcourses‘>免费</router-link> <router-link to=‘/courses/degreecourses‘>收费</router-link> <router-view></router-view> </div>`, }; let Lightcourses = { template: `<div><h1>这是轻课页面</h1></div>`, }; let Degreecourses = { template: `<div><h1>这是学位课程页面</h1></div>`, };? let App = { // 第四步 // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径 // 第五步 // router-view页面内容的渲染出口 template: `<div> <router-link :to=‘{name: "home"}‘>首页</router-link> <router-link :to=‘{name: "courses"}‘>登录</router-link> <router-view></router-view> </div>`, }; // 第二步,创建VueRouter对象 // 本质上是将路径和页面内容绑定了对应关系 let router = new VueRouter({ routes: [ // 对应关系 { name: ‘home‘, path: ‘/‘, component: Home, }, { name: ‘courses‘, path: ‘/courses‘, component: Courses, children: [ { path: ‘/courses/lightcourses‘, component: Lightcourses }, { path: ‘/courses/degreecourses‘, component: Degreecourses } ] }, ] }); new Vue({ el: ‘#app‘, // 第三步,在根实例中注册router对象 router: router, template: ‘<App/>‘, components: { App, } })</script>子路由append
<div id="app"></div><script> // 第一步,在vue根实例中使用VueRouter Vue.use(VueRouter);? let Home = { template: `<div><h1>这是主页面</h1></div>`, }; let Courses = { template: `<div><h1>这是课程页面</h1> <router-link :to=‘{name: "lightcourses" }‘ append >轻课</router-link> <router-link :to=‘{name: "degreecourses" }‘>学位课</router-link> <router-view></router-view> </div>`, }; let LightCourses = { template: `<div><h1>这是轻课页面</h1></div>`, }; let DegreeCourses = { template: `<div><h1>这是学位课程页面</h1></div>`, };? let App = { // 第四步 // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径 // 第五步 // router-view页面内容的渲染出口 template: `<div> <router-link :to=‘{name: "home"}‘>首页</router-link> <router-link :to=‘{name: "courses"}‘>课程</router-link> <router-view></router-view> </div>`,? }; // 第二步,创建VueRouter对象 // 本质上是将路径和页面内容绑定了对应关系 let router = new VueRouter({ routes: [ // 对应关系 { name: ‘home‘, path: ‘/‘, component: Home, }, { name: ‘courses‘, path: ‘/courses‘, component: Courses, children: [ { name: ‘lightcourses‘, path: ‘lightcourese‘, component: LightCourses }, { name: ‘degreecourses‘, path: ‘degreecourses‘, component: DegreeCourses }, ] }, ] }); new Vue({ el: ‘#app‘, // 第三步,在根实例中注册router对象 router: router, template: "<App/>", components: { App, } })</script>路由重定向
<script> // 第一步,在vue根实例中使用VueRouter Vue.use(VueRouter); let Home = { template: `<div><h1>这是主页面</h1></div>`, }; let Pay = { template: `<div><h1>这是支付页面</h1></div>`, }; let Login = { template: `<div><h1>这是登录页面</h1></div>`, }; let App = { // 第四步 // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径 // 第五步 // router-view页面内容的渲染出口 template: `<div> <router-link :to=‘{name: "home"}‘>首页</router-link> <router-link :to=‘{name: "login",}>登录</router-link> <router-link :to=‘{name: "pay",}>支付</router-link> <router-view></router-view> </div>`, }; // 第二步,创建VueRouter对象 // 把a标签的锚点值和页面内容绑定了对应关系 let router = new VueRouter({ routes: [ // 对应关系 { name: ‘hoem‘, path: ‘/‘, component: Home, }, { name: ‘login‘, path: ‘/login‘, component: Login, }, { name: ‘pay‘, path: ‘/pay‘, redirect: ‘/login‘, component: Pay, }, ] }) new Vue({ el: ‘#app‘, // 第三步,在根实例中注册router对象 router: router, components: { App, } })</script>路由的钩子函数
<div id="app"></div><script> // 第一步,在vue根实例中使用VueRouter Vue.use(VueRouter);? let Home = { template: `<div><h1>这是主页面</h1></div>`, }; let Pay = { template: `<div><h1>这是支付页面</h1></div>`, }; let Login = { template: `<div><h1>这是登录页面</h1></div>`, };? let App = { // 第四步 // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径 // 第五步 // router-view页面内容的渲染出口 template: `<div> <router-link :to=‘{name: "home"}‘>首页</router-link> <router-link :to=‘{name: "login"}‘>登录</router-link> <router-link :to=‘{name: "pay"}‘>支付</router-link> <router-view></router-view> </div>`,? }; // 第二步,创建VueRouter对象 // 把a标签的锚点值和页面内容绑定了对应关系 let router = new VueRouter({ routes: [ // 对应关系 { name: ‘home‘, path: ‘/‘, component: Home, }, { name: ‘login‘, path: ‘/login‘, component: Login, }, { name: ‘pay‘, path: ‘/pay‘, meta: { required_login: true }, component: Pay, }, ] });? // 通过router对象的beforeEach(function(to, from, next)) router.beforeEach(function(to, from, next){ console.log(‘to‘, to); console.log("from", from); console.log("next", next); if (to.meta.required_login){ next(‘/login‘); } else{ next(); } }); new Vue({ el: ‘#app‘, // 第三步,在根实例中注册router对象 router: router, components: { App, }, template: ‘<App/>‘, })</script>路径去掉#号
在router对象中加入mode: ‘history‘
<div id="app"></div><script> // 第一步,在vue根实例中使用VueRouter Vue.use(VueRouter);? let Home = { template: `<div><h1>这是主页面</h1></div>`, }; let Pay = { template: `<div><h1>这是支付页面</h1></div>`, }; let Login = { template: `<div><h1>这是登录页面</h1></div>`, };? let App = { // 第四步 // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径 // 第五步 // router-view页面内容的渲染出口 template: `<div> <router-link :to=‘{name: "home"}‘>首页</router-link> <router-link :to=‘{name: "login"}‘>登录</router-link> <router-link :to=‘{name: "pay"}‘>支付</router-link> <router-view></router-view> </div>`,? }; // 第二步,创建VueRouter对象 // 把a标签的锚点值和页面内容绑定了对应关系 let router = new VueRouter({ mode: ‘history‘, // 去掉# 号 routes: [ // 对应关系 { name: ‘home‘, path: ‘/‘, component: Home, }, { name: ‘login‘, path: ‘/login‘, component: Login, }, { name: ‘pay‘, path: ‘/pay‘, meta: { required_login: true }, component: Pay, }, ] });? // 通过router对象的beforeEach(function(to, from, next)) router.beforeEach(function(to, from, next){ console.log(‘to‘, to); console.log("from", from); console.log("next", next); if (to.meta.required_login){ next(‘/login‘); } else{ next(); } }); new Vue({ el: ‘#app‘, // 第三步,在根实例中注册router对象 router: router, components: { App, }, template: ‘<App/>‘, })</script>
原文地址:https://www.cnblogs.com/xiao-xue-di/p/9942193.html
时间: 2024-11-08 19:22:49