Vue-cli搭建与router路由护卫实战

"搭建Vue项目并实现Vue-router路由保护的教程" 本文将引导你通过Vue-cli搭建一个Vue项目，并逐步实现Vue-router的路由保护。首先，确保安装Vue-cli全局工具，对于Mac用户，使用命令`sudo npm install -g @vue/cli`。Vue-cli是一个快速的脚手架工具，能帮助我们构建Vue应用。 1、Vue-cli基础使用 1.1 创建项目 使用Vue-cli创建名为`vue-routes`的新项目，输入命令`vue create vue-routes`。这将自动下载和配置所需的依赖项。 1.2 启动项目 项目创建成功后，运行`yarn serve`启动开发服务器。项目将在`http://localhost:8080/`下运行，展示欢迎页面。 1.3 自定义配置 为了自定义项目配置，创建`vue.config.js`文件。在这个例子中，设置了项目标题`title`为"双11剁手啦"，以及自定义端口号`port`为1111。配置文件内容如下： ```javascript module.exports = { publicPath: '/wxy', devServer: { port: '1111', }, configureWebpack: { name: 'title', }, }; ``` 完成配置后，需要重启`yarn serve`以使更改生效。 2、SVG图标配置 要配置SVG图标，首先准备一个SVG文件（例如`src/icons/svg/hg.svg`）。接着，通过`yarn add svg-sprite-loader`安装SVG加载器。在`vue.config.js`中，我们需要修改webpack配置，将SVG规则排除`src/icons`目录，同时添加新的规则来处理SVG图标。 ```javascript const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { // ... chainWebpack(config) { config.module .rule('svg') .exclude.add(resolve('src/icons')) // 排除icons目录 .end(); config.module .rule('icons') .test /\.svg$/ // 匹配.svg文件 .include.add(resolve('src/icons')) // 包含icons目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ /* svg-sprite-loader 的选项 */ }); }, }; ``` 3、Vue-router路由保护 Vue-router是Vue.js官方的路由管理库，用于实现单页应用的路由控制。路由保护通常涉及未登录用户访问受保护页面时的重定向。以下是一个简单的路由卫兵（Guard）实现： 首先，安装Vue-router： ``` yarn add vue-router ``` 然后，在`src`目录下创建`router`文件夹，再创建`index.js`，设置路由配置： ```javascript import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; import ProtectedPage from '@/components/ProtectedPage'; Vue.use(Router); export default new Router({ routes: [ { path: '/', component: HelloWorld }, { path: '/protected', component: ProtectedPage, meta: { requiresAuth: true } }, ], }); ``` 创建一个全局守卫（Guard）以检查用户是否已登录： ```javascript // src/main.js import router from './router'; router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isUserAuthenticated()) { next('/'); // 如果用户未登录，重定向至首页 } else { next(); // 其他情况，允许导航 } }); function isUserAuthenticated() { // 这里应检查实际的用户认证状态，例如检查本地存储或会话存储 return false; // 作为示例，始终返回false } ``` 现在，当你尝试访问`/protected`路径而用户未登录时，将会被重定向回首页。请根据实际应用需求替换`isUserAuthenticated`函数，以实现真实的用户认证逻辑。 通过以上步骤，你已经成功地搭建了一个Vue项目，并实现了基本的路由保护功能。继续探索Vue-router的高级特性，如动态路由匹配、命名视图和路由懒加载，将有助于你构建更复杂的单页应用程序。