vue路由（一、二级路由）

1、什么是路由？

是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的

2.vue的路由分为两种：

hash路由 默认的是hash路由
history路由

3、hash路由的原理：

通过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash

4、history路由原理：

通过onpopstate来检测history堆栈路径的变化，堆栈的路径是通过history.pushState(null, '',"?page=2")添加进去的

vue路由的配置：

由hash路由设置成history路由，给路由添加配置项 mode="history"

5、一级路由的配置：

1、设置相应组件
2、在router->index.js文件中添加配置
首先引入组件，然后配置规则 {path:设置路径，name:名，component:组件}

        {path:'/index' ,name :'index' ,component:Index }

3、在需要现在组件的地方给页面添加<router-view></router-view>

路由.png

4、设置导航路径
使用vue提供 <router-link to="路径"></router-link> 默认的解析成a标签

     <router-link to="/index">跳转到首页</router-link>
     <router-link to="/search">跳转到搜索页</router-link>

5、设置默认路由

        使用的是重定向
        {
            path:"/",
            redirect:"路径"
        }

6、设置导航样式

        .router-link-active{ background:red;}

6、二级路由的配置

1、需要定义组件
2、确定好在那个组件配置二级路由，就去那个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则

        [ {
                          path:'/ ',
                          name:'index',
                          component:Index,//--->默认一级为/，打开Index组件
                          children:[
                                  {
                                         path:'search',//--->二级路由不用加斜杠
                                         name:'search',
                                         component:Search
                                  },
                                   {
                                        path:'/',//--->/为一级路由
                                        redirect:'/search'//--->默认search为二级路由主页面
                                    }
                           ]
        }]

3、在需要配置二级路由的组件中添加router-view
4、设置导航 <router-link to="//">

          <router-link  tag="p" to="/一级/二级">跳转到二级路由</router-link>
          //--->tag--->可以设置标签为p标签

5、设置导航链接的样式

         .router-link-active{ background:red;}

要是在App.js中写入组件底部footer路由，那么每个页面都会有这个组件footer路由，但是有的组件，不需要或者说不让底部footer组件显示，该怎么办呢？

我们可以定义一个一级路由，里面可以包裹底部footer组件，让他为二级路由，这时点击底部的二级路由时，就会切换不同的页面，而不需要底部组件显示的时候，那我们在配置一个一级路由就好了！！！

希望能对你有所帮助！！！！