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

1、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