Vue基础项目结构

Vue结构

• index.html：页面总入口，这个页面定义一个id为app的空的根节点，此即main.js里面定义的实例挂载点。<div id="app"></div>

• main.js：项目的入口文件，在运行npm run serve命令就首先运行了main.js文件，它创建vue实例，作为桥梁将App.vue组件挂载到index.html中，此外还负责全局引入一些插件。

  import Vue from 'vue'
  import App from './App.vue'
  ​
  // 创建 Vue 实例对象
  new Vue({
    render: h => h(App),  // render 函数将帮助解析模板，传入的参数 h 为一个函数，该函数用来解析 App 这个组件
  }).$mount('#app') // 将 App.vue 组件挂载到 index.html 中的 id 为 app 的 div 标签上

• App.vue：项目根组件，其他所有组件都包含在这个组件里，作为其子组件，在其页面中以<router-view>来控制不同页面的显示，即所有跳转的路由页面都插在此处渲染 。

• assets文件夹：资源文件，放入一些图片等。 components文件夹：公共组件，放入一些公用弹窗，公用输入框等等。

• vue.config.js：配置文件，如配置代理服务器等。

• <router-view> :相当于占位符，页面挂载点，当访问的地址为路由path时，会将router-view位置替换成对应的组件。

• Vue为单页应用，整个网站实际上只有一个页面，我们看到的页面的“跳转”其实只是一个页面上的局部组件的更替，路由指的是浏览器地址栏的路径和组件有着一一对应的关系，当输入指定地址，页面的某个区域的组件会替换成该地址对应的组件

        所以页面的显示：index.html来显示，但其实际为空，显示的都是挂载的vue页面。main.js是项目入口文件，将实质的页面显示文件App.vue挂载到index.html上。其他各页面都由路由插槽到App.vue进行显示。

        Vue导航守卫

• 功能：路由发生变化时，导航守卫会把页面的跳转拦截下来，如还没登录通过输入相应地址栏直接进入某个页面的问题即可由路由守卫来进行拦截解决。

• 实现：在router.js的路由配置中添加全局守卫方法，如全局前置守卫 router.beforeEach（to，from）=>{ return false}。其中，to：即将要进入的目标。from：当前导航正要离开的路由。return false即取消当前的导航。

Vue路由守卫无限循环问题

如果在守卫中，没有对转来的login进行next（）放行处理，则可能一直处于转至login的状态。

示例：在router.js的路由守卫中，有

router.beforeEach(async (to, from, next) => {
if（hasLogin）{
next（）//放行
}
else{
next（’/login‘）//回到login页面
}

此时，因为未登录而跳转至login页面，将一直进入else判断中从而导致无限循环。

if（to.path=’/login‘）{
next()
}
问题：vue路由守卫进入无限循环

• 原因：vue的路由守卫常用来拦截未登录的访问，将其访问转至’/login‘，next（’/login‘）

• 解决方式：如果要访问login页面则对其放行。

npm run serve 与npm run dev

        npm run serve命令是vue3版本使用的，npm run dev命令是vue2版本使用的，其本质是执行在package.json的脚本配置。其中的"scripts": { "serve": "vue-cli-service serve --open",} 在2.0版本中他是 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

所以运行npm run serve实际上是执行vue-cli-service serve

---

2024.7.20