vue Router 是 vue.js 官方的路由管理器. 它和 Vue.JS 的核心深度集成, 让构建单页面应用变得易如反掌. 本文就来为大家介绍一下 Vue Router 的使用方式.
一, Vue 中使用 Vue Router 简单方式使用 vue add xxx 命令添加插件
使用步骤, 本人假设已经安装好了 Vue CLI 工具
1. 创建项目
vue create hello2
创建过程比较慢, 需要稍等片刻. 提示选择模板地方使用默认就可以了.
2. 添加插件
vue add router
添加过程中, 提示是否使用模块方式编程, 选择 yes 就可以了
3. 运行项目
NPM run serve
运行成功后就可以开发调试了.
创建成功后的项目
创建成功后, 会自动下载插件, 并生成 router.JS 文件, 用于配置路由:
- import Vue from 'vue'
- import Router from 'vue-router'
- import Home from './views/Home.vue'
- Vue.use(Router)
- export default new Router({
- mode: 'history',
- base: process.env.BASE_URL,
- routes: [
- {
- path: '/',
- name: 'home',
- component: Home
- },
- {
- path: '/about',
- name: 'about',
- // route level code-splitting
- // this generates a separate chunk (about.[hash].JS) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
- }
- ]
- })
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/vue-js/17368.html