VueRouter路由的应用

1) 核心
        路由表定义
        路由地址切换
        组件显示

        路由
            localhost:8080/index.html#/
            路由地址 - 模块
            /                            Index.vue
            /category         Category.vue
            /article             Article.vue
            /user                 User.vue

            <div class="container">
                <div class="head"></div>
                <div class="content">
                    <div class="left-nav"></div>
                    <div class="right">
                        <router-view></router-view>
                    </div>
                </div>
            </div>

    2) VueRouter
        1. 安装
            > npm install vue-router --save
        2. 配置
            1) 建立路由表
                src/router/index.js
                    import Vue from 'vue';
                    import VueRouter from 'vue-router'
                    import HelloWorld from '@/pages/HelloWorld'
                    
                    Vue.use(VueRouter);
                    
                    export default new VueRouter({
                        routes:[{
                            path: '/',
                      component: HelloWorld
                        },{

                        }]
                    });

            2) 在main.js
                将路由表注册到根vue实例
                import router from '@/router'
                new Vue({
                    el:'',
                    router,
                })
        3. 应用
            1) 改变路由地址
                http://localhost:8080/index.html#/category

                <router-link to="/article">article</router-link>
            2) 组件渲染位置
                <router-view></router-view>
    3) 动态路由匹配
        new VueRouter({
            routes:[{
                path:'/article/:id',
                component:Article
            }]
        })

        /article/1    id为1的用户界面
        /article/2     id为2的用户界面
        ...
        /article/300     id为2的用户界面

        this.$route.params

        http://39.108.81.60:80/#/article/23
        http://39.108.81.60:80/#/article/29

        http://39.108.81.60:80

        若是改变更态路由中的参数，组件不会从新加载，也就说不少生命周期钩子函数只会执行一次（created,mounted），要想监控这种改变，能够经过watch来监听$route

    4) 嵌套路由
        new VueRouter({
            routes:[{
                path:'/category',
                component:'Category',
                children:[{
                    path:'check',
                    component:'CategoryCheck',
                }]
            }]
        })

        栏目管理
            category.vue
                栏目审核 check.vue     栏目预览
                <router-view></router-view>
        用户管理
        文章管理

        app.vue
                栏目审核     栏目预览
                check.vue

        /category

        /category/check