Vue例項生命週期+vueRoter
阿新 • • 發佈：2018-11-11
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標籤的錨點值和頁面內容綁定了對應關係