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