Vue实现网址路由(router)

今天，让我们一起走入VueApp之网址路由的世界！

为什么要使用网址路由？

无论是多页应用程序还是当今流行的单页应用程序，一个庞大的项目需要的功能组件是复杂多样的。各个功能需要不同的视图呈现，这样就要使用功能时进行页面的跳转或者是链接。

在传统的网站中，使用锚点标签指定url即可进行页面的跳转，或者使用js中BOM接口，window.location.href=[url]进行页面跳转。

而在单页应用中，整个项目只有一个完整的界面，视图的不同呈现是通过路由(router)来完成的。其实路由就是由一定的路径(path)映射到一定的组件(component)，实现了视图的切换。这样避免了整个页面重新加载造成的性能损耗。

如何在Vue中使用网址路由？

在建立Vue2项目的基础上，项目路径下执行cmd: 

cnpm i [email protected]

准备好一些Vue组件:

例如：

配置路由:

import VueRouter from 'vue-router'
import DepartmentPage from '../pages/depms/Department.vue'
const routes = [{
        'path': '/DepartmentPage',
        'component': DepartmentPage
    }
]
const router = new VueRouter({
    routes
})

export default router

安装路由，并导入路由配置渲染到Vue实例上：

import Vue from 'vue'
import HomePage from './pages/home/home.vue'
import VueRouter from 'vue-router'
import router from './router/index'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
    render: h => h(HomePage),
    router
}).$mount('#app')

页面使用路由：

在Vue中，使用网址路由要注意些什么？

对于不同的Vue版本的项目，可能要求的vue-router组件版本会不同，要注意版本问题。

路由的配置path和component属性必不可少。

使用之前，一定要先安装路由和渲染路由规则。

今日格言：Vue是鹿，照亮了明天的路