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