我的vue路由效果好像不生效。不懂哪里不对

  • Z时代
  • 2024-02-14
  • 分类：IT

我在App.vue上做的。网上抄了一个样式。但是一点效果都没有
抄的网址是这个https://www.jianshu.com/p/53d...
app.vue代码如下：
<template>

<div id="app">
    <transition name="slide-left">
        <router-view class="view"/>
    </transition>
</div>

</template>

<style lang="scss">

html,body{
    margin: 0;
    padding: 0;
    background-color: #041b2d;
    width: 100%;
    height: 100%;
}
.view {
    transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
}
.el-table th.gutter{
    display: table-cell!important;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  // width: 1920px;
  // height: 937px;
}

</style>

我的路由文件如下：
import Vue from 'vue'
import Router from 'vue-router'

import layout from '@/views/layout'
import test from '@/views/test'
import home from '@/views/home'
import secondflow from '@/views/secondflow'
import third from '@/views/third'
import four from '@/views/four'
import five1 from '@/views/five1'
import five2 from '@/views/five2'

Vue.use(Router)

export default new Router({

mode: 'history',
base: process.env.BASE_URL,
routes: [
    {
      path: '/login',
      component: () => import('@/views/login/index'),
      hidden: true
    },
    {
        path: '/',
        name: 'layout',
        component: layout,
        redirect:'/home',
        children: [
            {
                path: '/home',
                meta: {
                    isLogin: true
                },
                name: 'home',
                component: home
            }, 
            {
                path: '/secondflow',
                meta: {
                    isLogin: true
                },
                name: 'secondflow',
                component: secondflow
            }, 
            {
                path: '/third',
                meta: {
                    isLogin: true
                },
                name: 'third',
                component: third
            }, 
            {
                path: '/four',
                meta: {
                    isLogin: true
                },
                name: 'four',
                component: four
            }, 
            {
                path: '/five1',
                meta: {
                    isLogin: true
                },
                name: 'five1',
                component: five1
            }, 
            {
                path: '/five2',
                meta: {
                    isLogin: true
                },
                name: 'five2',
                component: five2
            }, 
        ]
    },
    {
        path: '/test',
        name: 'test',
        component: test
    },
]

})
我的vue路由效果好像不生效。不懂哪里不对

回答：

子路由的话，需要你在里面再引入一个 router-view。

话说我也没见你贴的地址里面有 router 部分啊。你把 children 改成平级的

以上是 我的vue路由效果好像不生效。不懂哪里不对 的全部内容， 来源链接： utcz.com/p/936034.html

回到顶部