Vue中路由管理器Vue Router使用方式（二）-推荐

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件

使用步骤，本人假设已经安装好了Vue CLI工具，了解更多参考：VSCode 搭建Vue开发环境之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')
    }
  ]
})

更多：

Vue中路由管理器Vue Router使用方式（一）

Element UI框架+Vue开发搭建示例

VSCode 搭建Vue开发环境之Vue CLI

来源：oschina

链接：https://my.oschina.net/u/2332115/blog/2248248