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)二選一:
html <router-link to="/children" tag="span">父組件</router-link> <router-view></router-view>
(路由中也能夠使用插槽slot的，這裏我沒用）

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

默認在頁面中是渲染成a標籤的 能夠經過tag="??" 改爲span標籤或者其餘標籤

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