vue-router使用方式 安裝到使用

前端路由概念：

對於普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源, 而對於單頁面引用
程序來講，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會
包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現。在單頁面應用程序中，這種通過hash
改變來切換頁面的方式，稱作前端路由, Vue-Router就是Vue實現SPA前端路由的js插件。

1:下載安裝 cnpm i vue-router -S

2:在main.js中引入路由組件: import VueRouter from 'vue-router'

3:在main.js中注冊全局使用: Vue.use(VueRouter)

(以下我選擇在src文件夾下新建一個router.js文件的方式)
具體如圖：

4.1:在router.js中導入路由需要的組件: 如:
import children from "./components/children"

4.2:創建路由對象並配置路由規則:

 let router = new VueRouter({
    routes:[
        {
            path:'/children',
            component:children
        }
    ]
});`

4.3: 在main.js中先引入router.js文件：
import router from './router1.js'

4.4然后在main.js中將其路由對象傳遞給Vue的實例:

4.5.(1):在app.vue中留位置：直接引入：
<router-view></router-view>

4.5(2)或者4.5.(1)二選一:

              <router-view></router-view>

(路由中也可以使用插槽slot的，這里我沒用）

注釋：在4.5(2)中 父組件

默認在頁面中是渲染成a標簽的 可以通過tag="??" 改成span標簽或者其他標簽

要注意，當 對應的路由匹配成功，將自動設置 class 屬性值為 .router-link-active 可以為其設置樣式