您的位置: 青财网 > 科技 > 正文

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

2020-11-19 07:56:41来源:阅读:-

路由定义:

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

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中路由导航 && 重定向 && 默认样式

推荐阅读:广东在线

滚动推荐
56:41Vue中路由导航 重定向 默认
路由定义:把数据从一个地方传送到另一个地方的行为和动作。1.在main[详细]
30:21电商创新空间广阔(生活漫步)!
今年春节市场,电商作用更加凸显,直播电商、社交电商、“不打烊”服务等消[详细]
20:53巨·研究|我国完全自主可控北斗核心
我们知道我国的科技领域目前在追赶当中,然而北斗系统系我国自主研发,核心[详细]
16:13查找手机功能这样用,让你失而复得!
手机丢失一定是一件很痛苦的事情,除了手机本身的价值之外,更重要的是里面[详细]
09:31如何查询手机是否支持北斗导航系统!
要想知道自己的手机是否支持北斗导航,第一个方法就是去手机品牌的官网查询[详细]
05:04阿里捐款十亿营收又下滑,腾讯局面却
是社交软件大佬,而且也是一个游戏公司,但是大家很喜欢把这两家公司放在一[详细]
46:44建造者模式——帮你解决四大Java
全文共11238字,预计学习时长33分钟图源:Pexels在用Java[详细]