Vue之建立組件之配置路由!

Vue之建立組件之配置路由! ==

第一步: 固然就是在咱們的試圖文件夾【views】新建一個文件夾好比home

• 在home文件夾下面新建一個文件index.vue
  

第二步：在router目錄下作以下事情！

import Vue from 'vue'
import VueRouter from 'vue-router'

// 在VueCLI 建立的項目中@表示src目錄它是src目錄的路徑別名
// 好處:它不受當前文件路徑影響
// 注意:@就是src路徑,後面別忘了寫那個斜槓
// 建議:若是加載的資源就在當前目錄下， 那就正常寫！
// 凡是須要進行父級路徑查找的都使用@
import Login from '@/views/login'
import Home from '@/views/home'

Vue.use(VueRouter)

// 路由配置表！
/* eslint-disable */
const routes = [
    {
        path: '/login',
        name: 'login',
        component: Login
    },
    {
        path: '/home',
        // 路由的名字是幹什麼的？！
        // 路由的 name 是路由對象中的一個配置選項，相似於下面這樣：
        // 因此結論就是：不管是否須要使用路由的 name，都建議給它寫上，當你須要的時候就很是有用了，這是一個建議的作法。
        name: 'home',
        component: Home
    }
]

const router = new VueRouter({ routes })

export default router

就配置好了！