Vue---Router(路由)基础

一、Router功能

主要实现SPA （ single page App ） 单页面应用

• 多页面应用：

    有多个html文件，通过a标签的连接联通各个页面
    缺点：开发起来太冗余，编译、压缩很耗时间；页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏
  

• 单页面应用

   不需要刷新页面，因为它就是一个页面；只是页面内容在切换；
   页面内容之间的切换要想实现，就需要用路由如今我们的app、后台管理系统 主要的开发形式就是spa
  

• vue路由功能

   实现单页面的切换
   路由携带参数
   路由的导航守卫：导航守卫可以监听路由变化情况
   路由进行数据预载（进入组件前就请求获得数据）
  

二、vue-router 基础

vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 /#home

history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home

abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】

三、路由的使用步骤

1. cli创建项目

   ` $ vue create router_practice `

2. 安装 vue-router
$ yarn add vue-router

3. 在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块

4. index.js文件引入第三方的依赖包, 并注册路由

       import Vue from 'vue'
       import VueRouter from 'vue-router'
     
       Vue.use( VueRouter ) //使用vue-router这个第三方插件

    注意： import这个关键字要放在整个文件的上层

5. 创建了一个router对象实例，并且创建路由表

 const routes = [//创建路由表，每一个对象就是一个路由
    {
       path:'/home',//路由路径
       component:Home,//当路径是/home时就会渲染Home 组件
    },
 ]
 
 const router = new VueRouter({//创建一个router对象实例
    routes,//路由表
    mode:'history',//路由的模式，还可以是hash
    module:{},//路由分块
 });
  

6. 导出router实例

    export default router

7. 入口文件main.js中引入路由实例 router , 然后在根实例中注册

 import Vue from 'vue'
 import App from './App.vue'
 
 import router from './ruoter/index.js'
 
 Vue.config.productionTip = false
 
 new Vue({
    router,//根实例中注册
   render: h => h(App),
 }).$mount('#app')

8. 给路由一个路由展示区域

如果是以及路由， 那么我们放在App组件中,用一个 router-view 的组件表示

     <!-- 路由展示区 -->
     <div class="row">
         <router-view></router-view>
     </div>

9. 当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上

   const routes = [
     { //我们要求这个路由的配置要放在路由表的最上方
       path: '/',
       redirect: '/home'
     }

10. 错误路由匹配

     {
        path: '/error',
        component: Error
      },
      {  //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个
        path: '**',
        redirect: '/error'
      }

router基础完整代码

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   
   import Home from '../pages/home';
   import Detail from '../pages/detail';
   import Recommend from '../pages/recommend';
   import Category from '../pages/category';
   import Mine from '../pages/mine';
   import Error from '../pages/error';
   
   
   Vue.use (VueRouter);//使用use方法来使用第三方插件
   
   const routes = [//创建路由表，每一个对象就是一个路由
      {
         path:'/',//路由重定向
         redirect:'/home'
      },
      {
         path:'/home',//路由路径
         component:Home,//当路径是/home时就会渲染Home 组件
      },
      {
         path:'/detail',
         component:Detail,
      },
      {
         path:'/category',
         component:Category,
      },
      {
         path:'/recommend',
         component:Recommend,
      },
      {
         path:'/mine',
         component:Mine,
      },
      {
         path: '/error',
         component: Error
      },
      {  //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个
         path: '**',
         redirect: '/error'
      }
   ]
   
   const router = new VueRouter({//创建一个router对象实例
      routes,//路由表
      mode:'history',//还可以是hash
      module:{},//路由分块
   });
   
   export default router;
   

11.路由导航

• 路由导航书写，由vue路由模式(mode)确定
• 如果使用的是 hash , 那么a标签就可以了、如果使用 history , 那么我们最好将a标签改成 router-link 这个组件
  • router-link 这个组件 身上必须要有一个 to 属性,to属性的属性值为路由路径。
  • router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存
  • router-link 这个组件身上加一个 class-active属性，属性值为active，可以进行路由激活。

     <!-- 路由导航 -->
       <div class="row">
          <ul class="nav nav-pills">
              <li class="nav-item">
                 <router-link class="nav-link" class-active="active" keep-alive to="/home">首页</router-link>
              </li>
              <li class="nav-item">
                 <router-link class="nav-link" class-active="active" keep-alive to="/category">分类</router-link>
              </li>
              <li class="nav-item">
                 <router-link class="nav-link" class-active="active" keep-alive to="/recommend">推荐</router-link>
              </li>
              <li class="nav-item">
                 <router-link class="nav-link" class-active="active" keep-alive to="/detail">详情</router-link>
              </li>
              <li class="nav-item">
                 <router-link class="nav-link" class-active="active" keep-alive to="/mine">我的</router-link>
              </li>
           </ul>
       </div>

12. 二级路由

       const routes = [
         {
            path:'/mine',
            component:Mine,
            children:[//二级路由，在一级路由组件中书写
                {
                   path:'login',
                   component:Login,
                },
                {
                   path:'register',
                   component:Register,
                }
             ]
         }
       ]
      // - 注意： 二级路由写好配置之后， 在对应的一级路由的组件中书写 二级路由展示区域

13. 二级路由的展示代码

   <template>
      <div>
         我的
         <div class="container">
            <!-- 二级路由导航 -->
            <div class="row">
               <ul class="nav nav-pills">
                  <li class="nav-item">
                     <router-link class="nav-link" class-active="active" to="/mine/register">注册</router-link>
                  </li>
                  <li class="nav-item">
                     <router-link class="nav-link" class-active="active" to="/mine/login">登录</router-link>
                  </li>
               </ul>
            </div>
   
            <!-- 二级路由展示区 -->
             <div class="row">
                <router-view name="two"></router-view>
             </div>
         </div>
      </div>
   </template>

14.命名路由

 作用： 简写路径了

     const routes = [
         {
            path:'/mine',
            component:Mine,
            children:[//二级路由，在一级路由组件中书写
                {
                   path:'login',//容易犯错点  ,路径不用带/ 
                   component:Login,
                   name:'login'//命名路由，目的是为了简写路径
                },
                {
                   path:'register',
                   component:Register,
                   name:'register'
       
                }
             ]
         }
       ]

使用：

<router-link :to = "{name:'yyb'}"/>