Vue Router

1. 相关理解
1.1 vue-router 的理解
​ vue的一个插件库，专门用来实现 SPA应用

1.2 对SPA应用的理解
(1) 单页web应用（single page web application,SPA）

(2) 整个应用只有一个完整的页面

(3) 点击页面中的导航链接不会刷新页面，只会做页面的局部更新

(4) 数据需要通过ajax请求获取

1.3 路由的理解
什么是路由？
a. 一个路由就是一组映射关系（key - value）

b. key为路径，value可能是function或component

路由分类
a. 后端路由

​ 理解： value是function，用于处理客户端提交的请求

​ **工作过程：**服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

b. 前端路由

​ 理解：value是component，用于展示页面内容

 **工作过程**：当浏览器的路径改变时，对应的组件就会显示

2. 基本路由

• 安装vue-router，命令 npm i vue-router
• 应用插件Vue.use(VueRouter)
• 编写 router配置项

• 
  import VueRouter from 'vue-router'			// 引入VueRouter
  import About from '../components/About'	// 路由组件
  import Home from '../components/Home'		// 路由组件
  
  // 创建router实例对象，去管理一组一组的路由规则
  const router = new VueRouter({
  	routes:[
  		{
  			path:'/about',
  			component:About
  		},
  		{
  			path:'/home',
  			component:Home
  		}
  	]
  })
  
  //暴露router
  export default router
  

  实现切换

  浏览器会被替换为a标签

  active-class 可配置高亮样式

  <router-link active-class="active" to="/about">About</router-link>
  1
  指示展示位

  src/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
          }
      ]
  })
   

  src/main.js

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

  src/App.vue

• <template>
    <div>
      <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
          <div class="page-header"><h2>Vue Router Demo</h2></div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
          <div class="list-group">
  					<!-- 原始html中我们使用a标签实现页面的跳转 -->
            <!-- <a class="list-group-item active" href="./about.html">About</a> -->
            <!-- <a class="list-group-item" 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>
  	export default {
  		name:'App'
  	}
  </script>
  

  4. (嵌套)多级路由

• 配置路由规则，使用children配置项

• routes:[
  	{
  		path:'/about',
  		component:About,
  	},
  	{
  		path:'/home',
  		component:Home,
  		children:[ 					// 通过children配置子级路由
  			{
  				path:'news', 		// 此处一定不要带斜杠，写成 /news
  				component:News
  			},
  			{
  				path:'message',	// 此处一定不要写成 /message
  				component:Message
  			}
  		]
  	}
  ]