Vue實例生命週期+vueRoter

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>