使用Vue记录（2）------------------项目介绍及使用router

最新推荐文章于 2025-05-10 15:41:13 发布

原创最新推荐文章于 2025-05-10 15:41:13 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Vue项目的基本目录结构，包括config、node_modules、src等关键目录的作用，以及如何利用router进行页面跳转。深入探讨了router/index.js文件的配置方法，演示了从新建组件到配置路由并实现跳转的全过程。

先只挑几个我认识的介绍，其他的以后用到再说。

这个是创建完后的目录结构，一开始感觉比springboot多得多，看着跟Android Studio（有幸写过一次）差不多。

config：顾名思义，配置类，在使用axios的时候遇到了跨域问题，在这里面的index设置的代理，解决的跨域。

node_modules：项目的依赖存放处，用新依赖的时候注意版本问题。

src：比较核心的目录

assets：存放图片啥的

components：存在vue代码

router：路由，存放所有的页面跳转路由

App.vue：目前算是主页，因为他在router里配置的是/

main.js：算是主函数，加载一些全局的东西，和构建全局的vue对象。

static：静态文件，可以在此处写html，因为vue在某些方面还是不如JQ

test：测试，没用过

package.json和package-lock.json：都是依赖信息

包介绍完以后就该今天的主角了，router

项目创建完以后会默认创建一个router/index.js文件

这个文件就是放路由的

比如router/index.js里面默认的有一个Helloword

因为path是/所以默认是主页了。

访问端口后自动访问HelloWorld对应的页面，HelloWorld在上面可以看出，是import进来的。

比如，我们在

HelloWorld统计新建一个Test（都是vue文件）

Test.vue

<template>

</template>

<script>
    export default {
        name: "",
        data(){
          return{
            name:"123456"
          }
        }
    }
</script>

<style scoped>

</style>

当然，新建这个文件以后，项目启动报错，原因是因为语法的问题

找到build/webpack.base.conf.js，注掉Eslint的校验。

这样启动就不会报错了

然后在router中配置上

然后在HelloWorld页面中加一个按钮，实现跳转

其中

this.$router.push({path:'/Test'})是通过路由提交路径

这个跟router-view这个标签有关

router-view这个标签在App.vue里

类似iframe中的src替换

this.$router.push({path:'/Test'})里面的router是在main.js中配置的，引入了router

这个是HelloWorld页面

这个点击跳转以后的页面，这样就实现了简单的跳转。