Vue之创建组件之配置路由!

最新推荐文章于 2024-04-02 17:46:59 发布

原创最新推荐文章于 2024-04-02 17:46:59 发布 · 229 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #java #centos #linux #hadoop

收录于

本文介绍了在Vue.js项目中如何配置路由。首先，在views文件夹下创建home文件夹和index.vue文件。接着，导入Vue和VueRouter，并设置路径别名@为src目录。然后，引入login和home组件，并定义路由配置，包括path、name和component属性。最后，创建VueRouter实例并导出路由器。通过这个步骤，完成了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