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

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

这个是创建完后的目录结构，一开始感觉比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页面

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