西宁在线 > 资讯 >Vue中路由导航 && 重定向 && 默认样式!

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

2020-11-20 14:03:56 来源:互联网 阅读:-

路由定义:

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

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

推荐阅读:赣财网

(正文已结束)

热点图片 更多>>
几十种鞋带花式系法,看看你会几种,这要是穿出门,回头率超高 几十种鞋带花式系法,看
被三缸机拖累的3款好车,明明不比四缸差,卖不动也太可惜了 被三缸机拖累的3款好车
最低15.49万元,实拍迈锐宝XL,搭载1.3T发动机,配主动降噪 最低15.49万元,实
跟着优衣库搭配师学穿搭①「 同色系+叠穿篇」春夏秋冬穿搭不愁 跟着优衣库搭配师学穿搭
新闻头条
精彩专题 更多>>
马丁靴+工装裤=谁穿谁nice 1马丁靴+工装裤=谁穿谁n
点击排行 更多>>