Vue的路由及路由钩子函数的实现

什么是路由

什么是路由？网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它决定的是一个端到端的网络路径。

web中，路由的概念也是类似，根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块)
使用vue.js构建项目，vue.js本身就可以通过组合组件来组成应用程序；当引入vue-router后，我们需要处理的是将组件(components)映射到路由(routes)，然后在需要的地方进行使用渲染。

其所包含的功能有：

1、基础路由

当我们通过 vue create 创建项目的的时候，会选择是否安装vue-router,项目创建后，在主组件App.vue中的HTML部分：

<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><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>

上述代码中，<router-view/>是路由出口，路由匹配到的组件将渲染在这里。

2、在router/index.js文件中

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义 (路由) 组件。 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }// 2. 定义路由每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。const routes = [ { path: '/foo', component: Foo }, ]// 3. 创建 router 实例，然后传 `routes` 配置const router = new VueRouter({ routes })// 4. 创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能const app = new Vue({ router}).$mount('#app')

3、动态路由

什么是动态路由？动态路由是指路由器能够自动的建立自己的路由表，并且能够根据实际情况的变化实时地进行调整。

1、在vue项目中，使用vue-router如果进行不传递参数的路由模式，则称为静态路由；如果能够传递参数，对应的路由数量是不确定的，此时的路由称为动态路由。动态路由，是以冒号为开头的(:)，例子如下：