vue 安裝路由模塊詳解

看的網上的視頻根據自己的實際情況總結的，也參考了別人的總結：

安裝路由模塊：

1.本地環境安裝路由插件vue-router：
  npm install vue-router --save -dev   

2.在main.js中導入vue-router:
  2.1import Router233 from 'vue-router'  //Router233 這個路由包名自定義就行，不過要和後面用到的保持一致

  2.2 Vue.use(Router233)
  2.3//配置路由
  const router = new Router233({
    routes:[
//routes裏自行設置，component:xxx  這裏的xxx 就是我們的組件名，例如我這的Home/HelloWorld

需要我們在前面先導入

//import HelloWorld from './components/HelloWorld'
//import Home from './components/Home'，
      {path:"/",component:Home},
      {path:"/helloworld",component:HelloWorld}
    ],
    mode:"history" //
    })
  2.4//在 new Vue({}) 中加上 router ：
  new Vue({
    router,//使用路由
  )}

3.在App.vue 中的html 中 加上 router-view（展示路由）:

<!--1模板：html結構-->
<template>
  <!-- 有且只有一個根標籤   例如： <div id="app">-->
  <div id="app">
    <router-view></router-view>
  </div>
</template>