前端路由

区别于后端路由 — 前端路由指的是，单页面应用程序中通过 Hash 来改变、切换页面的方式。

后端路由：在 Web 开发中，路由是指根据 URL 分配到对应的处理程序；

对于普通网站，所有的超链接都是 URL 地址，所有的 URL 地址都对应服务器上对应的资源

前端路由：对于单页面应用程序来说，主要通过 URL 中的 hash（ #号）来实现不同页面间的切换；

同时，hash 有一个特点：HTTP 请求中不会包含 hash 相关的内容，所以，单页面程序中的页面跳转主要用 hash 实现

对于大多数单页面应用，推荐使用官方支持的路由管理工具：vue-router。

vue-router 通过管理 URL，实现 URL 和组件的对应以及通过 URL 进行组件之间的切换。

在 Vue 中使用 vue-router

方式 1 ：~~直接下载（官网：https://router.vuejs.org/zh/ ）或使用 CDN~~

<!-- 引入 -->
<script src="./js/vue/vue.min@2.6.10.js"></script>
<script src="./js/vue-router/vue-router@3.0.2.js"></script>

<body>
	<div id="app">
		<Foo></Foo>
		<div>
			<!-- 路由导航 -->
			<router-link to="/foo">Foo</router-link>
			<router-link to="/bar">Bar</router-link>
		</div>
		<!-- 路由占位符 -->
		<router-view></router-view>
	</div>
	<script>
		const Foo = {
			template:'<div>Foo组件</div>'
		}
		const Bar = {
			template:'<div>Bar组件</div>'
		}
		// 创建路由实例
		var router = new VueRouter({
			// routes 是路由构造配置（或称之：路由规则数组）
			routes:[
				// 每个路有规则都是一个配置对象，其中至少包含path和component两个属性
				// path 表示当前路由规则匹配的 hash 地址
				// component 表示当前路由对应要展示的组件
				{
					path:'/foo',
					component:Foo
				},
				{
					path:'/bar',
					component:Bar
				}
			]
		})
		var vm = new Vue({
			el:'#app',
			router,  // 挂载路由实例
		})
	</script>
</body>

方式 2（推荐）：通过 vue-cli 创建项目，使用 npm 安装 vue-router

在命令行中安装 vue-router 库

npm install vue-router

创建路由配置文件，并挂载路由实例

// 路由配置文件 router/index.js
import Vue from 'vue'
import Router from 'vue-router'    // 引入vue-router
Vue.use(Router) 

// 导入组件 
import Foo from '@/components/Foo'
import Bar from '@/components/Bar'

export default new Router({    // 创建路由实例
  // 路由构造配置
  routes: [    
    // 路由规则
    { path: '/foo', component: Foo }
    { path: '/bar', component: Bar }
  ],
  // 其他路由配置
})

# 将路由实例挂载到 Vue 实例中

// 一般是main.js
import router from './router'    // 引入路由配置文件

new Vue({
  el: '#app',
  router,    // 挂载路由实例
  components: { App},
  template: '<App/>'
})

在组件中使用路由导航和渲染视图

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 渲染视图，又称为路由占位符 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>