vue main.js中引入js_Vue中路由导航 && 重定向 && 默认样式

路由定义:

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

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

619a99831bcd2891c443d231eb839ab8.png

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

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

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

轮播切换

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中加入,到此处简单路由就完事了

ca0f472200b96914ae5cee7b802c6e89.png

如果想给个默认的样式:

1.router/index.js文件的中,加入:linkActiveClass:'active', //名字可以随意定义 2.在navView.vue加入此样式,字体颜色就是pink.active{ color:pink}
fd605a4174f94972d90e6300d5e5e36d.png

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

 redirect:'/banner' //重定向
971c031b5c9567c1a5c5b464d2cae58c.png
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值