路由定义:
把数据从一个地方传送到另一个地方的行为和动作。
1.在main.js文件中引入路由,如果router文件夹中,不是index.js文件,需在此处写上指定文件(如是abc.js), import router from './router/abc.js'
![619a99831bcd2891c443d231eb839ab8.png](https://i-blog.csdnimg.cn/blog_migrate/12c95a4cc58544d8c9a7046b78a75a17.jpeg)
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中加入,到此处简单路由就完事了
![ca0f472200b96914ae5cee7b802c6e89.png](https://i-blog.csdnimg.cn/blog_migrate/c66b621f167dd7c893d3d560068572ee.jpeg)
如果想给个默认的样式:
1.router/index.js文件的中,加入:linkActiveClass:'active', //名字可以随意定义 2.在navView.vue加入此样式,字体颜色就是pink.active{ color:pink}
![fd605a4174f94972d90e6300d5e5e36d.png](https://i-blog.csdnimg.cn/blog_migrate/583a648876ce42dfe2aa6a5fbb07d21c.jpeg)
如果想重定向一打开域名的链接
redirect:'/banner' //重定向
![971c031b5c9567c1a5c5b464d2cae58c.png](https://i-blog.csdnimg.cn/blog_migrate/772fd76c8bd90a32bc3c4b88f6c772d3.jpeg)