赞同 2
分享
刷新

Vue子路由的用法

2020-07-19 Bug Man 2 72
简介：在使用Vue子路由的时候会有一种使用后端子路由惯性思维，在Vue中的子路由是如何使用和使用在什么场景？
  2020.07.19
  Bug Man
  2
  72
  172.17.0.1
  中国.上海
 
 

今天在使用Vue-router路由的时候子路由组件内容始终无法渲染，这个是因为我完全把它当做Django里面的子路由用了，在抽象层面我认为Vue和Django的子路由的作用是一样的。但又在具体使用的时候又是两个不一样的概念，比如：Django根路由会include指向到应用中的子路由，再由根路由指向具体的视图函数、类；把Vue router插件实例化参数routers列表中的对象比做根路由，那这个对象的children列表属性里面的对象比做子路由的话，那这个路由的用法是在根路由对象component这个组件中像APP.vue中使用<router-view />标签去用作渲染子路由对应对象的component。

先给出我的/router/index.js内容：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export const route_const = [
    {
        path: '/',
        name: '/',
        component: function(resolve){
            require(['@/views/Home'], resolve);
        },
        meta: {
            requireLogin: true
        }
    },
    {
        path: '/home/',
        name: 'home',
        component: function(resolve){
            require(['@/views/Home'], resolve);
        },
        meta: {
            requireLogin: true
        }
    },
    {
        path: '/about/',
        name: 'home',
        component: function(resolve){
            require(['@/views/About'], resolve);
        },
        meta: {
            requireLogin: true
        }
    },
    {
        path: '/login/',
        name: 'login',
        component: function(resolve){
            require(['@/views/account/Login'], resolve);
        }
    },
    {
        path: '/error',
        name: 'error',
        component: function(resolve){
            require(['@/views/error/index'], resolve);
        },
        children:[
            {
                path: '404/',
                name: '404',
                component: function(resolve){
                    require(['@/views/error/404'], resolve);
                },
                meta: {
                    requireLogin: true
                }
            }
        ]
    },
    { 
        path: '*', 
        redirect: 'error/404/',
        meta: {
            requireLogin: true
        }
    }
]

const createRouter = () => new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    mode: 'history',
    routes: route_const
})

const router = createRouter()

export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // reset router
}

export default new Router({
    mode: 'history',
    routes: route_const
});

下面给出根路由error的component组件内容：

<template>
    <div>
        <h2>报错页面专用</h2>
        <router-view />
    </div>
</template>

<script>
export default {
    name: 'error'
}
</script>

下面给出子路由404的component组件内容：

<template>
    <div>
        <h2>404</h2>
    </div>
</template>

<script>
export default {
    name: '404'
}
</script>

想上面这种使用方法当我在浏览器中输入{{domain}}/error/404/，这个使用就可以渲染了，那我之前是怎么用的呢？我直接根路由不给component组件内容，直接在children子路由中去写子路由的组件内容，我以为这个跟路由只起到便捷的作用，也有可能我还没有发现我所想的这种使用方式。慢慢用吧，相信时间长了以后见到优秀项目以后吸取其中优秀的写法。 子路由渲染