Vue-router基本使用

一、什么是vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。专门用来实现 SPA 应用

二、对 SPA 应用的理解

1. 单页 Web 应用（single page web application，SPA）。
2. 整个应用只有一个完整的页面。
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4. 数据需要通过 ajax。

三、路由的理解

1. 什么是路由?
   • 一个路由就是一组映射关系（key - value）
   • key 为路径, value 可能是 function 或 component
2. 路由分类
   • 后端路由：
     • 理解：value 是 function, 用于处理客户端提交的请求。
     • 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数
       来处理请求, 返回响应数据。
   • 前端路由：
     • 理解：value 是 component，用于展示页面内容。
     • 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

四、安装和使用vue-router

1. 安装路由

   npm install vue-router --save

2. 定义路由组件
   里面随便写点东西用于测试即可
   

3. 注册路由
   router->index.js

   //该文件专门用于创建整个应用的路由器
   import VueRouter from "vue-router";
   //引入组件
   import About from '../components/About'
   import Home from '../components/Home'
   //创建并暴露一个路由器
   export default new VueRouter({
       routes:[
           {
               path:'/about',
               component:About
           },
           {
               path:'/home',
               component:Home
           }
       ]
   })
   

   main.js

   import Vue from "vue"
   import App from "./App.vue"
   //引入Vue-router路由器插件
   import VueRouter from "vue-router";
   //引入路由器
   import router from "./router/index";
   //应用插件
   Vue.use(VueRouter)
   Vue.config.productionTip=false;
   const vm = new Vue({
       el:"#app",
       render:h=>h(App),
       router:router
   })
   

4. 使用路由
   App.vue

   <template>
   <div>
       <div class="row">
         <Banner/>
       </div>
       <div class="row">
         <div class="col-xs-2 col-xs-offset-2">
           <div class="list-group">
             <!-- 原始html我们使用a标签实现页面的跳转 -->
             <!-- <a class="list-group-item" href="./about.html">About</a>
             <a class="list-group-item active" href="./home.html">Home</a> -->
             <!-- Vue中使用router-link标签实现路由的切换 -->
             <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
             <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
           </div>
         </div>
         <div class="col-xs-6">
           <div class="panel">
             <div class="panel-body">
               <!-- 指定组件的呈现位置 -->
              <router-view></router-view>
             </div>
           </div>
         </div>
       </div>
     </div>
   </template>
   
   <script>
   import Banner from './components/Banner.vue';
   export default {
       name:"App",
       components:{Banner}
   }
   </script>
   

   • router-link
     请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。
   • router-view
     router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。