您所在的位置: > 主页 > 玉溪信息港 > 汽车 > 正文
Vue中路由导航 && 重定向 && 默认样式来源: 日期:2020-03-26 06:16:24  阅读:-

    路由定义:

    把数据从一个地方传送到另一个地方的行为和动作。

    1.在main.js文件中引入路由,如果router文件夹中,不是index.js文件,需在此处写上指定文件(如是abc.js), import router from './router/abc.js'


    2.定义了一个navView.vue文件,在App.vue引入该组件,

    App.vue文件:
    <navView></navView>
    import navView from './components/navView'
    components:{
    // banner
    navView
    },

    3.在navView文件中插入路由,(前提是有banner tab 这俩组件)

    <router-link to="/banner">轮播</router-link>
    <router-link to="/tab">切换</router-link>

    4.在router/index.js文件中引入路径,并配置

    import banner from '../components/banner'
    import tab from '../components/tab'
    {
    path: '/banner',
    name: 'banner',
    component: banner
    },
    {
    path: '/tab',
    name: 'tab',
    component: tab、

    },

    5.路由的出口,路由匹配到的组件渲染的位置,在App.vue中加入,到此处简单路由就完事了

    <router-view></router-view>





    如果想给个默认的样式:

    1.router/index.js文件的中,加入:
    linkActiveClass:'active', //名字可以随意定义

    2.在navView.vue加入此样式,字体颜色就是pink
    .active{ color:pink}



    如果想重定向一打开域名的链接

     redirect:'/banner' //重定向


    (正文已结束)

    免责声明及提醒:此文内容为本网所转载企业宣传资讯,该相关信息仅为宣传及传递更多信息之目的,不代表本网站观点,文章真实性请浏览者慎重核实!任何投资加盟均有风险,提醒广大民众投资需谨慎!