vueルーティング構成

ルーティングのインストール

npm install vue-router --save-dev

コンフィギュレーション

srcにrouter/index.js

を新規作成

srcの下にmain.jsとApp.vue

を新規作成

router/index.jsでルーティングパスと対応するコンポーネント

を構成する

/**
 *   vue-router
 */
import Vue from 'vue';
import VueRouter from 'vue-router';

//     ,  use
Vue.use(VueRouter); //         

//      
const routes = [
    {
        //     
        path: '/film',
        component: () => import('@/views/film'),
    },
    {
        //     
        path: '/cinema',
        component: () => import('@/views/cinema'),
    },
    {
        //     
        path: '/pintuan',
        component: () => import('@/views/pintuan'),
    },
    {
        //     
        path: '/my',
        component: () => import('@/views/my'),
    },
];

const router = new VueRouter({
    routes
});
export default router;

main.jsでrouter/index.jsをインポートし、vueのインスタンスに

を入れます.

import Vue from 'vue';
import App from './App.vue';
import router from './router/index'

new Vue({
    router,
    render: h=>h(App)
}).$mount('#app');

プロジェクトvue serve./src/main.js

を実行
router-viewとrouter-link

/ルート

/filmはルート/filmルート

を意味する.

router-view配置(レンダリング)サブルーティング

metaは属性を設定でき、ルーティングガードの使用を便利にする

{
            path: '/order',
            component: () => import('@/views/my/order'),
            redirect: '/order/orderList',
            children: [
                {
                    path: 'orderList',
                    meta: {
                        title: '    ',
                        needLogin: true
                    },
                    component: () => import('@/views/order/orderList')
                },
                {
                    path: 'orderDetail/:orderID',
                    meta: {
                        title: '    ',
                        needLogin: true
                    },
                    component: () => import('@/views/order/orderDetail')
                }
            ]
        }

/**
 * @param {to}        
 * @param {from}       
 * @param {next}       
 */
router.beforeEach((to, from, next) => {
    document.title = to.meta.title || '    '
    //      
    let isLogin = $store.state.isLogin
    if (to.meta.needLogin && !isLogin) {
        next({
            path: '/login'
        })
    } else {
        next();
    }
})

ガードが必要な位置に設定

meta: {
    needLogin: true
},