Vue实例生命周期+vueRoter
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>
