Vue-router之初体验

之前在做网站时页面与页面之间的转换都是使用a链接跳页面的方式进行跳转的，这样就会带来一个问题，那就是响应时间会变慢并且会时常出现卡顿的现象，这就让人很不舒服了。因此我开始在关注上Vue全家桶之一的vue-router。走路由的好处在于：**通过路由来加载页面，不会让你重新刷新这个页面，而是可以做到局部页面组件的替换(隐藏或者显示)，一开始加载的一些CSS,JavaScript文件都不用再次重新加载了，网页上的响应速度当然是会变快了。**在这里不得不称赞一下Vue的强大，给尤大大点个赞！
首先我们按照国际惯例，先来Vue官方指南上瞅瞅Router实例

官网已经将router解释的很明白了，首先，他传递给人了一种组件化的思想。所谓组件化，就是将大大小小dom进行拆分，将一个网站拆分成很多很多的小零件，然后再将这些小零件映射到路由上，接着我们需要做的就是告诉vue-router我的这些小零件该渲染到什么位置，也可以说vue-router就是一种工具。接下来我们来看一下官方所给出的栗子：

<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 class="view"></router-view>
</div>

这个router-link我们可以将其理解为导航，这有点类似于HTML中的a链接而router-view呢相当于是一个 iframe ，但是页面是不需要跳转的。router-link 还有一个非常重要的属性 to， 它定义点击之后，要到哪个路径下,比如<router-link to="/foo">Go to Foo</router-link> 就是指向/foo下对应的那个名为Foo的组件，而Foo则对应着一个<div class="tt">foo</div> 的组件。

<script>
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

        // 1. 定义（路由）组件。
       // 可以从其他文件 import 进来
       const Foo = { template: '<div class="tt">foo</div>' }
       const Bar = { template: '<div>bar</div>' }

       // 2. 定义路由
	// 每个路由应该映射一个组件。 其中"component" 可以是
	// 通过 Vue.extend() 创建的组件构造器，
	// 或者，只是一个组件配置对象。
	// 我们晚点再讨论嵌套路由。
	const routes = [
	  { path: '/foo', component: Foo },
	  { path: '/bar', component: Bar }
	]

	// 3. 创建 router 实例，然后传 `routes` 配置
	// 你还可以传别的配置参数, 不过先这么简单着吧。
	const router = new VueRouter({
	  routes // （缩写）相当于 routes: routes
	})
	
	// 4. 创建和挂载根实例。
	// 记得要通过 router 配置参数注入路由，
	// 从而让整个应用都有路由功能
	const app = new Vue({
	  router
	}).$mount('#app')
	
	// 现在，应用已经启动了！
    </script>

在这里我要说一下什么是path。path就是路径，路由就是什么样的路径访问什么样的页面，就像道路上的路牌一样。path 这里表示这个站点什么样的路径到什么样的页面组件。template中可以定义一些组件，也可以通过import将文件引进来。$mount（）这个哥们和el:的效果是一样一样的。