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>
    `,
}