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