您的位置: 天津都市网 > 资讯 > 正文

Vue中路由导航 && 重定向 && 默认样式!

2020-11-19 13:19:43来源:阅读:-

路由定义:

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

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


Vue中路由导航 && 重定向 && 默认样式

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


Vue中路由导航 && 重定向 && 默认样式




如果想给个默认的样式:

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

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


Vue中路由导航 && 重定向 && 默认样式


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

 redirect:'/banner' //重定向


Vue中路由导航 && 重定向 && 默认样式

推荐阅读:北方生活网

滚动推荐
19:43Vue中路由导航 重定向 默认
路由定义:把数据从一个地方传送到另一个地方的行为和动作。1.在main[详细]
58:43万众创业的这个时代,成功靠的是什么
万众创业的这个时代,成功靠的是什么?眼光?头脑?还是什么?历史上具备这[详细]
36:54时尚百搭家居新宠,Yeelight
时尚科技时代,智能家居产品已经成为居家生活的首选,细至一盏灯都已经智能[详细]
33:57iPhone用户换华为手机迁移需要
自从三星手机电池爆炸事件之后,高端手机很长一段时间只有一个玩家就是iP[详细]
39:40老房改造之邦先生让父母也用上智能窗
近几年,家居智能化的普及程度越来越高,安装使用门槛也越来越低,只需简单[详细]
20:46一份报告读懂化妆品电商行业:行业转
随着中国网络科技高速发展,以及中国居民可支配收入稳定增长,线上购物成为[详细]
16:13研报丨2019年全球动力电池行业危
储能业务拖累下,LGChem 4Q19电池业务营业利润率低至-10.1[详细]