路由定义：

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

1.在main.js文件中引入路由，如果router文件夹中，不是index.js文件，需在此处写上指定文件(如是abc.js)， import router from './router/abc.js'

2.定义了一个navView.vue文件，在App.vue引入该组件，

App.vue文件：
&lt;navView&gt;&lt;/navView&gt;
import navView from &#39;./components/navView&#39;
components:{
 // banner
 navView
 },

3.在navView文件中插入路由，（前提是有banner tab 这俩组件）

&lt;router-link to=&#34;/banner&#34;&gt;轮播&lt;/router-link&gt;
&lt;router-link to=&#34;/tab&#34;&gt;切换&lt;/router-link&gt;

4.在router/index.js文件中引入路径，并配置

import banner from &#39;../components/banner&#39;
import tab from &#39;../components/tab&#39;
{
 path: &#39;/banner&#39;,
 name: &#39;banner&#39;,
 component: banner
 },
 {
 path: &#39;/tab&#39;,
 name: &#39;tab&#39;,
 component: tab、
 
 },

5.路由的出口，路由匹配到的组件渲染的位置，在App.vue中加入，到此处简单路由就完事了

&lt;router-view&gt;&lt;/router-view&gt;

如果想给个默认的样式：

1.router/index.js文件的中，加入：
linkActiveClass:&#39;active&#39;, //名字可以随意定义
 
2.在navView.vue加入此样式，字体颜色就是pink
.active{ color:pink}

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

 redirect:&#39;/banner&#39; //重定向

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

路由定义：