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

就配置好了！