使用vue的脚手架工具搭建项目

【步骤】

如果是使用npm安装Vue的脚手架工具，最好安装一个nrm,切换为taobao源这样下载文件速度会更快，或者使用yarn来安装
删除之前安装的老版本的Vue脚手架工具npm uninstall vue-cli -g或yarn global remove vue-cli
安装vue的脚手架工具npm install @vue/cli@4.5.9, 如果想全局安装就加-g
使用vue create [dirname] 命令创建vue的项目,手动安装，不使用eslint对语法进行校验
进入创建好的项目，运行npm run serve 把项目跑起来，接着打开 http://localhost:8080/就可以访问到项目了
如果下载的项目没有node_modules，那么就使用npm install 安装项目的依赖

项目目录

【备注】

.vue格式的文件就是vue的单文件组件，把模板放到了template中管理，把样式放到style中管理,把逻辑部分放到script中进行管理
main.js是vue的入口文件它做的事情是：创建一个叫App的vue的应用(根组件)挂载到#app的div上

todoList

// App.vue
<template>
  <div>
    <input type="text" v-model="inputVal">
    <button @click="handleAddItem" class="button">提交</button>
    <ul>
      <list-item 
      v-for="item in list"
       :key="index"
       :msg="item"
      />
    </ul>
  </div>
</template>


<script>
import { reactive, ref } from 'vue';
import ListItem from './components/ListItem.vue'

export default {
  name: 'App',
  components:{
    ListItem
  },
  setup() {
    const inputVal = ref('')
    const list = reactive([])
    const handleAddItem = () => {
      list.push(inputVal.value)
      inputVal.value = ''
    }
    return { list, handleAddItem, inputVal }
  }
}
</script>

<style>
  .button{
    margin-left: 20px;
  }

</style>

// ListItem.vue
<template>
  <li >{{ msg }}</li>
</template>

<script>
export default {
  name: 'ListItem',
  props: {
    msg: String
  }
}
</script>


<style>

</style>

VueRouter

重新使用vue create [dir] 命令创建一个vue项目，勾选vue-router,不使用history路由而是使用哈希路由,不使用eslint

定义

路由是指根据url的不同，展示不同的内容。

如下图所示，地址栏中url为#就展示首页，url为about就展示about页面

路由的工作逻辑

在main.js中，当写了use(router)的时候就会找到路由的配置文件src/router/index.js，也就知道了路由个和页面之间对应的跳转关系

main.js

src/router/index.js

2.vue程序从入口文件main.js中进入首先执行的组件是App的根组件，看下App组件中写了什么

在App.vue中写了路由的展示(router-view)和跳转(router-link)，点击不同的路由跳转(router-link)就会展示(router-view)路由对应的组件(在src/router/index.js文件中已经配置好了)

【备注】

router-link是跳转路由的标签，也就是说当点击Home的时候会跳转到跟路由，当点击About的时候就跳转到about的路由

路由的内容需要由router-view做展示！！

如果没有router-view，即使点击可以跳转到路由对应的页面，但是没有相应组件的内容展示出来。

因为路由的内容是需要router-view作展示，当写了router-view之后，跳转不同的路由的时候，路由对应的组件才能通过router-view展示出来

====> touter-view 负责展示当前路由对应的组件内容

一个疑问？

在路由的配置文件中，最后一个路由的配置为什么要有import的语法呢？

===> 它是一个异步加载路由的语法

它的意思是并不是一次性就加载路由中的所有组件，而是只有在真正访问路由对应的组件时，才加载这个页组件

比如：上面login的路由并没有使用异步加载路由，那么当我访问Home页面的时候实际上已经将Login页面加载到本地了，这样我们在访问首页的时候就多加载了很多没有必要加载的内容，因此我们可以通过异步加载路由的方式，降低首页需要加载的量，这样首页打开的时间就更快

而about路由使用的是异步加载路由，只有当页面跳转到about路由的时候，才会去加载路由对应的组件

异步加载路由的弊端

由于异步加载路由会在点击跳转时才去请求文件，因此可能会出现：页面跳转的时候，速度可能会有些慢。而同步路由，在页面切换跳转的时候速度会更快，只是如果路由太多，组件体积太大时，加载首页的时间会更长

因此要使用同步的路由还是写异步的路由还是要根据实际项目的需求来做

路由更复杂的内容：比如：当访问根组件，想要访问Home组件的之前，想做一些权限的校验，这时候就要使用路由守卫

路由守卫

比如：只有登录了才可以访问相关页面

router.beforeEach((to, from, next) => {
    if(isLogin){
        next()
    }else{
        next({name: 'Login'})
    }

})

【备注】

router.beforeEach的意思是每次做路由跳转前都会执行的方法
to 是当路由要跳转的时候，要跳转到页面的信息
from 指的是路由从哪里跳转的信息

但是上面的写法是有问题的：

它会有一个死循环：当访问Login页面会进入router.beforeEach函数，进来之后，由于没有登录又会走 next({name: 'Login'})的逻辑

也就是说一直处于登录的页面，也不会走next()的逻辑，进入了死循环

解决这个问题需要加一个判断，意思是如果访问的是Login页面，那么就执行next(),路由就放行继续下面的逻辑,这样就不会死循环了,这样如果用户没有登录且访问的不是Login页面，那么都会跳转到Login页面

默认用户点击了登录按钮就表示已经登录了localStorage.isLogin = true，就可以访问其他页面了

router.beforeEach((to, from, next) => {
    // 从本地存储中取Login的状态
    const isLogin = localStorage.isLogin
    if(isLogin || to.name = "Login"){
        next()
    }else{
        next({name: 'Login'})
    }

})

登录之后应该直接跳转到首页

import { useRouter } from 'vue-router'
export default {
  name: 'Login',
  setup() {
   const router = useRouter
   // 点击登录
   const handleLogin = () => {
     localStorage.isLogin = true
     // 重新做一次路由的跳转，访问下一个页面
     router.push({name: 'Home'})
   }
  }
}

如果已经登录了，就不让访问`Login`页面，而是跳转到首页

{
 path: '/Login',
 name: 'Login'
 component: Login,
 beforeEnter(to,from,next){
     const isLogin = localStorage.isLogin
     if(isLogin){
       next({name: 'Home'})
     }else{
       next()
     }
 }
}

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END