Vue入門（8）路由

1.原生js模擬路由實現原理

<a href="#/login">登錄</a>
<a href="#/register">註冊</a>
<div id="app"></div>
<script>
    var oDiv = document.getElementById(("app"))
	window.onhashchange = function(){
        console.log(location.hash);
        switch (location.hash) {
            case "#/login":
                oDiv.innerHTML = "<h2>我是登錄頁面</h2>"
                break;
            case "#/register":
                oDiv.innerHTML = "<h2>我是註冊頁面</h2>"
                break;    
            default:
                break;
        }
    }
</script>

2.安裝Vue Router

npm install vue-router －S

3.引入Vue Router

<script src="node_modules/vue-router/dist/vue-router.js"></script>

4.使用Vue Router

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

Vue.use(VueRouter)

<div id="app"></div>
<script>
    var Login = {
        template:`
            <div>我是登錄頁面</div>
        `,
    }

    var Register = {
        template:`
            <div>我是註冊頁面</div>
        `,
    }
    //配置路由對象
    var router = new VueRouter({
        routes : [
            {
                path : "/login",
                component : Login
            },
            {
                path : "/register",
                component : Register
            }
        ]
    })
    //引入vue-router模塊，就有了兩個全局組件，router-link 和 router-view
    //router-link會被渲染成a標籤，to渲染成href
    //router-view是路由匹配組件的出口
    var App = {
        template:`
            <div>
                <router-link to="/login">登錄</router-link>
                <router-link to="/register">註冊</router-link>
                <router-view></router-view>
            </div>
        `,
    }

    new Vue({
        el : "#app",
        data(){
            return {

            }
        },
        template:`
            <App/>
        `,
        router,
        components : {
            App
        }
    })

</script>

5.命名路由

//配置路由對象
var router = new VueRouter({
    routes : [
        {
            path : "/login",
            name : "login",
            component : Login
        },
        {
            path : "/register",
            name : "register",
            component : Register
        }
    ]
})

<router-link :to="{name:'login'}">登錄</router-link>
<router-link :to="{name:'register'}">註冊</router-link>

6.路由參數

動態路由參數

注意看URL變化
點擊用戶1時候：http://localhost:8000/8-1.路由參數.html#/user/1
點擊用戶2時候：http://localhost:8000/8-1.路由參數.html#/user?userId=2

<script>
    var UserP = {
        template:`
            <div>我是用戶111</div>
        `,
        created(){
            //拋出來倆個對象掛在到了vue實例對象中$route和$router
            console.log(this.$route.params.id);//1
        }
    }

    var UserQ = {
        template:`
            <div>我是用戶222</div>
        `,
        created(){
            console.log(this.$route.query.userId);//2
        }
    }
    //配置路由對象
    var router = new VueRouter({
        routes : [
            {   //動態路由參數，以冒號開頭
                path : "/user/:id",
                name : "user1",
                component : UserP
            },
            {   
                path : "/user",
                name : "user2",
                component : UserQ
            }
        ]
    })
    //引入vue-router模塊，就有了兩個全局組件，router-link 和 router-view
    //router-view是路由匹配組件的出口
    var App = {
        template:`
            <div>
                <router-link :to="{name:'user1',params:{id:1}}">用戶1</router-link>
                <router-link :to="{name:'user2',query:{userId:2}}">用戶2</router-link>
                <router-view></router-view>
            </div>
        `,
    }
</script>

7.路由嵌套

<script>
    var Home = {
        template:`
            <div>
                我是首頁
                </br>
                <router-link to="/home/song">歌曲</router-link>
                <router-link to="/home/movie">電影</router-link>
                <router-view></router-view>
            </div>
        `
    }

    var Song = {
        template:`
            <div>
                我是歌曲頁
            </div>
        `
    }

    var Movie = {
        template:`
            <div>
                我是電影頁
            </div>
        `
    }
    //配置路由對象
    var router = new VueRouter({
        routes : [
            {   //動態路由參數，以冒號開頭
                path : "/home",
                name : "home",
                component : Home,
                children : [
                    {   
                        path : "song",
                        component : Song,
                    },
                    {   
                        path : "movie",
                        component : Movie,
                    }
                ]
            }
        ]
    })

    var App = {
        template:`
            <div>
                <router-link :to="{name:'home'}">首頁</router-link>
                <router-view></router-view>
            </div>
        `,
    }
</script>

8.動態路由匹配

<script>
    
    var Timeline = {
        template:`
            <div id=""timeline>
                 <router-link :to="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
                 <router-link :to="{name:'comDesc',params:{id:'backend'}}">後端</router-link>
                 <router-view></router-view>
            </div>
        `,
    }

    var Pins = {
        template:`
            <div>我是沸點</div>
        `
    }

    //提醒一下，當使用路由參數時，例如從 /user/foo 導航到 /user/bar，
    //原來的組件實例會被複用。因爲兩個路由都渲染同個組件，比起銷燬再創建，複用則顯得更加高效。
    //不過，這也意味着組件的生命週期鉤子不會再被調用。

    //複用組件時，想對路由參數的變化作出響應的話，你可以簡單地 watch (監測變化) $route 對象：

    var ComDesc = {
        data(){
            return {
               msg : ""
            }
        },
        template:`
            <div>我是{{msg}}</div>
        `,
        created(){
            console.log(111);
            this.msg = "前端"
        },
        watch: {
            '$route' (to, from){
                // 對路由變化作出響應...
                // 發送ajax請求
                console.log(to);
                console.log(from);
                if(to.params.id == "frontend"){
                    this.msg = "前端"
                }else if(to.params.id == "backend"){
                    this.msg = "後端"
                }
            }
        }
    }
    //配置路由對象
    var router = new VueRouter({
        mode : "history",	//把url中的＃去掉
        routes : [
            {   //動態路由參數，以冒號開頭
                path : "/timeline",
                component : Timeline,
                children : [
                    {
                        name : "comDesc",
                        path : "/timeline/:id",
                        component : ComDesc
                    }
                ]
            },
            {   
                path : "/pins",
                component : Pins
            }
        ]
    })

    var App = {
        template:`
            <div>
                <router-link to="/timeline">首頁</router-link>
                <router-link to="/pins">沸點</router-link>
                <router-view></router-view>
            </div>
        `,
    }

    new Vue({
        el : "#app",
        data(){
            return {

            }
        },
        template:`
            <App/>
        `, 
        router,
        components : {
            App
        }
    })

</script>

9.路由重定向

重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

10.keep-alive在路由中的使用

使用keep-alive內置組件可以在組件切換的過程中把組件的狀態保存起來，不會反覆的創建銷燬組件

下面例子中，點擊我是沸點會讓字體變紅，如果不使用keep-alive的話組件切到首頁再切回沸點的時候，之前的字體變紅狀態就會消失。

    
var Timeline = {
    template:`
        <div id=""timeline>
             我是首頁
        </div>
    `,
    created(){
        console.log("首頁組件創建了");
    },
    mounted(){
        console.log("首頁組件dom加載了"); 
    },
    destroyed(){
        console.log("首頁組件銷燬了");
    }
}

var Pins = {
    template:`
        <div>
            <h3 @click="handler">我是沸點</h3>
        </div>
    `,
    methods : {
        handler(e){
            e.target.style.color = "red"
        }
    },
    created(){
        console.log("沸點組件創建了");
    },
    mounted(){
        console.log("沸點組件dom加載了"); 
    },
    destroyed(){
        console.log("沸點組件銷燬了");
    }
}
//配置路由對象
var router = new VueRouter({
    routes : [
        {   //動態路由參數，以冒號開頭
            path : "/timeline",
            component : Timeline
        },
        {   
            path : "/pins",
            component : Pins
        }
    ]
})
var App = {
    template:`
        <div>
            <router-link to="/timeline">首頁</router-link>
            <router-link to="/pins">沸點</router-link>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    `,
}