目录
安装和配置
Vue Router 是 Vue.js 官方的路由插件,它和 vue.js 是深度集成的,适合用于构建单页面应用。
包含的功能有:
-
嵌套的路由/视图表
-
模块化的、基于组件的路由配置
-
路由参数、查询、通配符
-
基于 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')