千百态时尚欢迎您!
千百态时尚>游戏>正文

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

2020-03-28 08:51:59 来源: 阅读:1

路由定义:

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

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' //重定向


本文为企业推广,本网站不做任何建议,仅提供参考,作为信息展示!

推荐阅读:苹果x和xr

网友评论
请登录后进行评论| 0条评论

请文明发言,还可以输入140

您的评论已经发表成功,请等候审核

小提示:您要为您发表的言论后果负责,请各位遵守法纪注意语言文明

回到首页 回到顶部
千百态时尚 关于我们| 联系我们| 招聘信息| 老版地图| 网站地图
免责声明:千百态时尚所有文字、图片、视频、音频等资料均来自互联网,不代表本站赞同其观点,本站亦不为其版权负责。相关作品的原创性、文中陈述文字以及内容数据庞杂本站无法一一核实,如果您发现本网站上有侵犯您的合法权益的内容,请联系我们,本网站将立即予以删除!
Copyright © 2012-2019 http://www.qbtss.cn, All rights reserved.