Vue2-todolist——搭建&配置&路由&守卫

搭建项目

1. vue-cli全局安装

npm install -g @vue/cli
//安装vue-cli 4
复制代码

1. 搭建脚手架

vue create todolist-vue
复制代码

1. 到达项目目录

cd todolist-vue
复制代码

1. 运行

npm run serve
复制代码

在安装过程中会有自定义的配置，一般来说我选择配置css预处理以及默认eslint。当然其中的路由也就是vue-router可以选择安装也可以选择后续安装，以及相关配置不必要的情况下不要存在package.json中

安装elementUI库

1. 安装

npm i element-ui -S
复制代码

1. 引入（全局）

//main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
复制代码

main.js配置说明

1. import Vue from 'vue'
   导入vue包，得到Vue构造函数
   
2. import App from './App.vue'
   导入APP.vue根组件，把其中的模板结构渲染到页面中
   
3. new Vue({render:h=>h(app)}).$mount('#app')
   创建Vue的实例对象并把render函数指定的组件渲染到页面上
   

路由配置

1. 安装vue-router

npm install vue-router --save-dev
复制代码

1. 我们首先在src目录下新建文件夹views，在views中创建Login.vue和Todo.vue
   
2. 然后我们在src目录下新建文件夹router，在router新建index.js作为路由配置文件

//index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
复制代码

1. 创建路由的实例对象

const router = new VueRouter
复制代码

1. 向外共享路由实例对象

export default router
复制代码

1. 引入vue文件

import Login from "../views/Login";
import Todo from '../views/Todo'
复制代码

1. 配置实例对象

{path: "/",redirect: '/login'},
{path: "/todo",component: Todo},
{path: "/login",component: Login}
复制代码

1. 这里的redirect 为默认，当地址为/时，会自动跳转到配置的组件中
2. 导入并挂载路由模块(mian.js)

import router from '@/router/index.js'
new Vue({render: h => h(APP),router:router}).$mounter
复制代码

1. 注意这里的@符是指代src目录，其是在webpack中配置，但是由于由脚手架直接搭建，所以我们是没有看到webpack.config.js文件
2. 关于默认src目录的问题由于我们项目是由脚手架搭建的所以在我们所看的项目目录中是看不到webpack.config.js文件的，也就是我们看不到我们关于默认目录配置的地方，但是我们可以通过可视化来查看

• 启动可视化

vue ui
复制代码

• 查看任务中的webpack配置
  
• 运行查看
  
  在这里我们就可以看到关于目录的配置，这里的alias中的第一个就是关于默认目录的配置项目

导航守卫

1. 全局前置守卫在我们登录之前，需要配置导航守卫，来防止用户在没有权限的时候绕过登录跳转到操作页面

• 创建路由实例对象

const router = new VueRouter({........})
复制代码

• 调用路由实例对象的beforeEach(),即可声明“全局前置守卫”

router.beforeEach(function() { })
复制代码

• 每次发送路由导航跳转时，都会自动触发 fn为一个回调函数

router.beforeEach(() => { })
复制代码

1. 全局守卫的三个形参

router.beforeEach((to,from,next) => { })
复制代码

• to 是将要访问的路由的信息对象
• from 是将要离开的路由的信息对象
• next 是一个函数，调用next() 表示放行，允许这次路由导航

1. 应用场景

• 当用户拥有访问权限时，直接放行 next()
  
• 当用户没有访问权限时，强制其跳转到登录页面 next('/login')
  
• 当用户没有访问权限时，不允许跳转到其他页面 next(false)