Vue.js 学习笔记十三：Vue Router 之安装和配置

目录

安装和配置

安装

配置

---

安装和配置

Vue Router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。

官方文档：Vue Router (vuejs.org)

包含的功能有：

• 嵌套的路由/视图表

• 模块化的、基于组件的路由配置

• 路由参数、查询、通配符

• 基于 Vue.js 过渡系统的视图过渡效果

• 细粒度的导航控制

• 带有自动激活的 CSS class 的链接

• HTML5 历史模式或 hash 模式，在 IE9 中自动降级

• 自定义的滚动条行为

 

安装

前面已经学习了 webpack，后续开发中我们主要是通过工程化的方式进行开发的。

我们可以直接使用 npm 来安装路由：

npm install vue-router --save

使用 Vue CLI 构建的项目，你可以以项目插件的形式添加 Vue Router：

vue add router

 

配置

在模块化工程中，因为它是一个插件，必须要通过 Vue.use() 明确地安装路由功能。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

创建 router 实例

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1.注册插件
Vue.use(VueRouter)

// 2.定义路由
const routes = []

// 3.创建router实例
const router = new VueRouter({
  	routes
})

// 4.导出router实例
export default router

挂载到 Vue 实例中

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')