本文已参与「新人创作礼」活动，一起开启掘金创作之路

本文主要介绍Vue.js中路由的使用。简而言之，路由是对应关系。分为前端路由和后端路由，前端路由通过事件的监听获取指定的内容，后端路由通过网址获取指定的内容。首先，本文会介绍前端路由的基本使用（未利用vue-router）,后续会介绍vue-router的具体使用。

1.基础案例引入

基础案例主要通过hash地址变化的监听实现了简单的路由功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
前端路由:根据事件获取不同内容
后端路由：根据地址获取不同内容
     -->
    <div id="app">
        <a href="#index">主页</a>
        <a href="#technology">科技</a>
        <a href="#finance">财经</a>
        <a href="#sports">体育</a>
        <!-- 占位符 -->
        <component :is="showPart"></component>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        // 定义组件
        const index = {
            template: '<h1>主页信息</h1>'
        };
        const technology = {
            template: '<h1>科技信息</h1>'
        };
        const finance = {
            template: '<h1>财经信息</h1>'
        };
        const sports = {
            template: '<h1>体育信息</h1>'
        };
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    showPart: 'index'
                }
            },
            components: {
                technology,
                finance,
                index,
                sports
            }
        })
        window.onhashchange = function() {
            vm.showPart = location.hash.slice(1);
        }
    </script>
</body>

</html>

2.vue-router的基本使用

下面介绍vue-router的使用方法：

(1)页面标签构建

router-link会被渲染为a链接，to对应的是href属性，默认会在前面添加一个“#”.router-view为占位符，用于显示跳转后得到的内容。

 <div id="app">
        <router-link to="/tech">科技</router-link>
        <router-link to="/sports">体育</router-link>
        <router-view>
    </div>

（2）定义组件

组件中通过template定义显示的内容

 let tech = {
            template: '<h1>科技信息</h1>'
        };
        let sports = {
            template: `
            <div>
                <h1>体育信息</h1>
                <hr>
                <router-link to="/sports/basketball">basketball</router-link>
                <router-link to="/sports/volleyball">volleyball</router-link>
                <router-view>
            </div>
            `
        };
        let b = {
            template: '<h2>basketball</h2>'
        };
        let v = {
            template: '<h2>volleyball</h2>'
        };

（3）创建vue-router对象

通过VueRouter创建实例化对象，利用routes可为不同组件设置指定的路径，同时可以利用重定向设置默认路径。注意：通过children可以添加子路由

 // 3.创建VueRounter实例化对象
        const selfRouter = new VueRouter({
            // redirect重定向，当访问的路径是“/”时，直接切换为“/tech路径。可用于设置默认显示内容
            routes: [{
                path: '/',
                redirect: '/tech'
            }, {
                path: '/sports',
                redirect: '/sports/basketball'
            }, {
                path: '/tech',
                component: tech
            }, {
                path: '/sports',
                component: sports,
                children: [{
                    path: '/sports/basketball',
                    component: b
                }, {
                    path: '/sports/volleyball',
                    component: v
                }]
            }]
        });

（4）Vue中挂载路由

在Vue实例中添加router,赋值为上面创建的router对象

 const vm = new Vue({
            el: '#app',
            data: function() {
                return {}
            },
            methods: {},
            router: selfRouter
        })

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1.HTML书写 -->
        <router-link to="/tech">科技</router-link>
        <router-link to="/sports">体育</router-link>
        <router-view>
    </div>
    <script src="./vue.min.js"></script>
    <script src="./vue-router.min.js"></script>
    <script>
        // 2.定义组件
        let tech = {
            template: '<h1>科技信息</h1>'
        };
        let sports = {
            template: `
            <div>
                <h1>体育信息</h1>
                <hr>
                <router-link to="/sports/basketball">basketball</router-link>
                <router-link to="/sports/volleyball">volleyball</router-link>
                <router-view>
            </div>
            `
        };
        let b = {
            template: '<h2>basketball</h2>'
        };
        let v = {
            template: '<h2>volleyball</h2>'
        };
        // 3.创建VueRounter实例化对象
        const selfRouter = new VueRouter({
            // redirect重定向，当访问的路径是“/”时，直接切换为“/tech路径。可用于设置默认显示内容
            routes: [{
                path: '/',
                redirect: '/tech'
            }, {
                path: '/sports',
                redirect: '/sports/basketball'
            }, {
                path: '/tech',
                component: tech
            }, {
                path: '/sports',
                component: sports,
                children: [{
                    path: '/sports/basketball',
                    component: b
                }, {
                    path: '/sports/volleyball',
                    component: v
                }]
            }]
        });
        // 4.在Vue实例中挂载
        const vm = new Vue({
            el: '#app',
            data: function() {
                return {}
            },
            methods: {},
            router: selfRouter
        })
    </script>
</body>

</html>

3.动态匹配路由

（1）通过$route.params获取参数

  const userIndo = {
            template: `<div>用户的ID值为{{$route.params.id}}</div>`
        };
        let r = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/user/1'
            }, {
                path: '/user/:id',
                component: userIndo
            }]
        });

（2）利用props获取参数,props值为布尔类型

 const userIndo = {
            props: ['id'],
            template: `<div>用户的ID值为{{id}}</div>`
        };
 let r = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/user/1'
            }, {
                path: '/user/:id',
                component: userIndo,
                props: true
            }]
        });

（3）利用props获取参数,props值为对象类型


        const userIndo = {
            props: ['uname', 'age'],
            template: `<div>{{uname+'-'+age}}</div>`
        };
        let r = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/user/1'
            }, {
                path: '/user/:id',
                component: userIndo,
                props: {
                    uname: '张三',
                    age: 20
                }
            }]
        });

（4）利用props获取参数,props值为函数类型

  const userIndo = {
            props: ['uname', 'age', 'id'],
            template: `<div>{{uname+'-'+age+'-'+id}}</div>`
        };
        let r = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/user/1'
            }, {
                path: '/user/:id',
                component: userIndo,
                props: r => ({
                    uname: '张三',
                    age: 20,
                    id: r.params.id
                })
            }]
        });

最后一例的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 利用props获取参数,props值为函数类型 -->
</head>

<body>
    <div id="app">
        <!-- 1.html标签 -->
        <router-link to="/user/1">用户1</router-link>
        <router-link to="/user/2">用户2</router-link>
        <router-link to="/user/3">用户3</router-link>
        <router-link to="/user/4">用户4</router-link>
        <router-link to="/user/5">用户5</router-link>
        <router-view></router-view>
    </div>
    <script src="./vue.min.js"></script>
    <script src="./vue-router.min.js"></script>
    <script>
        // 2.定义组件
        const userIndo = {
            props: ['uname', 'age', 'id'],
            template: `<div>{{uname+'-'+age+'-'+id}}</div>`
        };
        // 3.定义路由规则，设置重定向
        let r = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/user/1'
            }, {
                path: '/user/:id',
                component: userIndo,
                props: r => ({
                    uname: '张三',
                    age: 20,
                    id: r.params.id
                })
            }]
        });
        // 4.在Vue实例中挂载路由
        const vm = new Vue({
            el: '#app',
            data: function() {
                return {}
            },
            methods: {},
            router: r
        })
    </script>
</body>

</html>

4.vue-router的方法

在介绍方法之前，首先介绍命名路由的使用。命名路由是给路由起了个名字（通过name属性）,这样可以实现指定的跳转。

（1）push方法

通过参数传入跳转的数据

（2）go方法

前进后退功能，参数为1表示前进，参数为-1表示后退。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 命名路由：给路由命名，实现指定跳转 -->
</head>

<body>
    <div id="app">

        <router-link to="/user/1">用户1</router-link>
        <router-link to="/user/2">用户2</router-link>
        <router-link to="/user/3">用户3</router-link>
        <router-link :to="targeted()">用户4</router-link>
        <router-link to="/user/5">用户5</router-link>
        <router-view></router-view>
    </div>
    <script src="./vue.min.js"></script>
    <script src="./vue-router.min.js"></script>
    <script>
        const userIndo = {
            props: ['uname', 'age', 'id'],
            template: `<div><div>{{uname+'-'+age+'-'+id}}</div> <div><button @click="jump()">编程式跳转</button></div>
            <div><button @click="$router.go(-1)">后退</button></div>
            <div><button @click="$router.go(1)">前进</button></div>
            </div>`,
            methods: {
                jump() {
                    // 1.push('/user/5')
                    // 2.push({path: '/user/5'})
                    // 3.this.$router.push({
                    //     name: 'user',
                    //     params: {
                    //         id: 123
                    //     }
                    // })
                    // 4
                    this.$router.push({
                        path: 'user/5',
                        // 定义查询参数
                        query: {
                            uid: 123
                        }
                    })
                }
            }
        };

        let r = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/user/1'
            }, {
                name: 'user',
                path: '/user/:id',
                component: userIndo,
                props: r => ({
                    uname: '张三',
                    age: 20,
                    id: r.params.id
                })
            }]
        });

        const vm = new Vue({
            el: '#app',
            data: function() {
                return {}
            },
            methods: {
                targeted() {
                    return {
                        name: 'user',
                        params: {
                            id: 123
                        }
                    }
                }

            },
            router: r
        })
    </script>
</body>

</html>

Vue.js之路由的使用