vue路由配置

安装路由

• npm install vue-router --save-dev

配置

1. 在src里新建router/index.js
2. 在src下面新建main.js 和 App.vue
3. 在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;

4. 在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');

5. 运行项目 vue serve ./src/main.js

router-view 和 router-link

1. /根路由
2. /film 意思是 根路由/film路由
3. 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
},