用vue路由实现简单的编程式导航

这个案例主要是用来复习vue-router的知识点，涉及到了路由的基本使用方法、路由重定向、动态路由分配及传递参数、路由编程式导航等知识点。
实现的思路：
首先定义一个App的根组件，然后将模板渲染到这个组件中，新建一个路由实例对象router，创建路由规则将这个模板渲染出来。
然后定义5个组件：用户管理组件（Users）、权限管理组件（Rights）、商品管理组件（Goods）、订单管理组件（Orders）、系统设置组件（Settings），并在根组件中添加这5个组件的路由链接和路由占位符，在路由实例对象中添加路由规则。使点击左边的小li可以在右边显示相应的内容。
最后就是在用户组件中增加一个表格来丰富内容，使用v-for循环的形式遍历用户内容，然后点击详情可以跳转到另一个页面（使用$router.push('hash地址')），页面中使用动态分配路由和props传递值获取路径参数id。详情页中也使用编程式导航中的API----$router.go(n)来实现回退。
首页展示：

详情页展示：

HTML代码：

<div id="app">
        <router-view></router-view>
    </div>

CSS代码：

<style>
        html,
        body,
        #app {
            margin: 0;
            padding: 0px;
            height: 100%;
        }
        
        .header {
            height: 50px;
            background-color: #545c64;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
            color: #fff;
        }
        
        .main {
            display: flex;
            position: absolute;
            top: 50px;
            bottom: 40px;
            width: 100%;
        }
        
        .content {
            flex: 1;
            text-align: center;
            height: 100%;
        }
        
        .left {
            flex: 0 0 20%;
            background-color: #545c64;
        }
        
        .left a {
            color: white;
            text-decoration: none;
        }
        
        .right {
            margin: 5px;
        }
        
        .footer {
            height: 40px;
            line-height: 40px;
            background-color: #888;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #fff;
        }
        
        .btns {
            width: 100%;
            height: 35px;
            line-height: 35px;
            background-color: #f5f5f5;
            text-align: left;
            padding-left: 10px;
            box-sizing: border-box;
        }
        
        button {
            height: 30px;
            background-color: #ecf5ff;
            border: 1px solid lightskyblue;
            font-size: 12px;
            padding: 0 20px;
        }
        
        .main-content {
            margin-top: 10px;
        }
        
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul li {
            height: 45px;
            line-height: 45px;
            background-color: #a0a0a0;
            color: #fff;
            cursor: pointer;
            border-bottom: 1px solid #fff;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        td,
        th {
            border: 1px solid #eee;
            line-height: 35px;
            font-size: 12px;
        }
        
        th {
            background-color: #ddd;
        }
    </style>

JavaScript代码：

<script>
        // 创建APP 根组件
        var App = {
            template: ` <div><!-- 头部区域 -->
                    <header class="header">后台管理</header>
                    <!-- 主体区域 -->
                    <div class="main">
                        <!-- 左边菜单栏部分 -->
                        <div class="content left">
                            <ul>
                                <li><router-link to="/users">用户管理</router-link></li>
                                <li><router-link to="/rights">权限管理</router-link></li>
                                <li><router-link to="/goods">商品管理</router-link></li>
                                <li><router-link to="/orders">订单管理</router-link></li>
                                <li><router-link to="/settings">系统设置</router-link></li>
                            </ul>
                        </div>
                        <!-- 右侧内容区域 -->
                        <div class="content right">
                            <div class="main-content">
                                <router-view></router-view>
                            </div>
                        </div>
                    </div>
                    <!-- 尾部区域 -->
                    <footer class="footer">版权信息</footer>
                    </div>`
        }

        // 创建用户管理组件
        var Users = {
                data: function() {
                    return {
                        userlist: [{
                            id: 1,
                            name: '张三',
                            age: 10
                        }, {
                            id: 2,
                            name: '李四',
                            age: 20
                        }, {
                            id: 3,
                            name: '王五',
                            age: 30
                        }, {
                            id: 4,
                            name: '赵六',
                            age: 40
                        }]
                    }
                },
                template: `<div>
                            <h1>用户管理组件</h1>
                            <table>
                            <thead>
                            <tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
                            </thead>
                            <tbody>
                            <tr :key="item.id" v-for="item in userlist">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.age}}</td>
                            <td><a href="javascript:;" @click="goDetail(item.id)">详情</a></td>
                            </tr>
                            </tbody>
                           </div>`,
                methods: {
                    goDetail(id) {
                        this.$router.push('/userinfo/' + id);
                    }
                }
            }
            //创建详情页组件
        var UserInfo = {
            props: ['id'],
            template: `<div>用户详情页
            <h3>id号为：{{id}}</h3>
            <button @click="goback">后退</button>
            </div>`,
            methods: {
                goback() {
                    this.$router.go(-1);
                }
            }
        }

        // 创建权限管理组件
        var Rights = {
                template: `<div>
                            <h1>权限管理组件</h1>
                           </div>`
            }
            // 创建商品管理组件
        var Goods = {
                template: `<div>
                            <h1>商品管理组件</h1>
                           </div>`
            }
            // 创建订单管理组件
        var Orders = {
                template: `<div>
                            <h1>订单管理组件</h1>
                           </div>`
            }
            // 创建系统设置组件
        var Settings = {
                template: `<div>
                            <h1>系统设置组件</h1>
                           </div>`
            }
            // 创建路由对象
        var router = new VueRouter({
                routes: [{
                    path: '/',
                    component: App,
                    redirect: '/users',
                    children: [{
                        path: '/users',
                        component: Users
                    }, {
                        path: '/userinfo/:id',
                        component: UserInfo,
                        props: true
                    }, {
                        path: '/rights',
                        component: Rights
                    }, {
                        path: '/goods',
                        component: Goods
                    }, {
                        path: '/orders',
                        component: Orders
                    }, {
                        path: '/settings',
                        component: Settings
                    }]
                }]
            })
            // 创建vue实例对象
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

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