ITPub博客

首页 > > > Vue中路由使用 && 重定向 && 默认样式

Vue中路由使用 && 重定向 && 默认样式

作者:doudourabbit 时间:2019-12-06 16:06:38 0 删除 编辑

路由定义:

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

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

<router-view></router-view>

如果想给个默认的样式:

1.router/index.js文件的中,加入:

linkActiveClass:'active', //名字可以随意定义

2.在navView.vue加入此样式,字体颜色就是pink

.active{ color:pink}

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

redirect:'/banner' //重定向

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/4809/viewspace-3134902/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-25

  • 博文量
    193
  • 访问量
    1437