路由定義:
把數據從一個地方傳送到另一個地方的行為和動作。
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' //重定向