vue 开发系列 路由配置

Posted 2021-03-19 tommymarc

概要

用Vue.js + vue-router 创建单页应用，是非常简单的。使用Vue.js，我们已经可以通过组合组件来组成应用程序，当你要把vue-router 添加进来，我们需要做的是，将组件(componennts)映射到路由(routes) , 然后告诉vue-router在哪里渲染它们。

实现代码

1.在main.js 中引入 router.

//main.js 引入router
import router from ‘./router/index‘

2.在main.js 中使用router 

global.globalVm = new Vue({
    el:‘#app‘,
    router,
    render:function(h){
        return h(app);
    },
    sotre,
    watch:{
        ‘$route‘(to,from){
            globalVm.$dialog.loading.close();
            curPath = to.name;
        }
    }
})

这里倒入router配置，页面使用这个路由进行页面切换

3. 组件渲染的位置。

我们可以看到App.vue 组件，页面组件渲染到<router-view> </router-view>标签中

<template>
    <div>
        <transition :name=‘direction‘>
            <keep-alive>
                <router-view :resize="Resize" v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
        </transition>
        <transition>
            <router-view :resize="Resize" v-if="!$route.meta.keepAlive"></router-view>
        </transition>
        <loading v-model="isLoading" String="加载中">
    </div>
</template>

router-view 这个是vue 组件渲染的地方。

4.组件路由配置

 

 index.js 配置如下：