Vue中路由导航 && 重定向 && 默认样式!
2020-11-19 04:18:36阅读:-
来源:
路由定义:把数据从一个地方传送到另一个地方的行为和动作。1.在main.js文件中引入路由,如果router文件夹中,不是index.js文件,需在此处写上指定文件(如是abc.js), import router from './router/abc.js'2.
路由定义:
把数据从一个地方传送到另一个地方的行为和动作。
1.在main.js文件中引入路由,如果router文件夹中,不是index.js文件,需在此处写上指定文件(如是abc.js), import router from './router/abc.js'
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中加入,到此处简单路由就完事了
如果想给个默认的样式:
1.router/index.js文件的中,加入:
linkActiveClass:'active', //名字可以随意定义
2.在navView.vue加入此样式,字体颜色就是pink
.active{ color:pink}
如果想重定向一打开域名的链接
redirect:'/banner' //重定向
(正文已经结束)
推荐阅读:长沙热线
免责声明及提醒:此文内容为本网所转载企业宣传资讯,该相关信息仅为宣传及传递更多信息之目的,不代表本网站观点,文章真实性请浏览者慎重核实!任何投资加盟均有风险,提醒广大民众投资需谨慎!
相关新闻
- 2020-04-23·华为P40 Pro皮革保护壳曝
- 2020-04-30·iOS越狱重大突破:苹果iPh
- 2020-05-07·找到最适合你的电脑数据恢复软件
- 2020-05-13·这款手机可能是首款为短视频而生
- 2020-05-20·教你如何实现手机(电脑)无线远
资讯排行