别的不多说,开始动爪把,
首先安装vue-cli mac: sudo npm install -g @vue/cli
github:
https://github.com/XinYueXiao/vue-routes
1、Vue-cli基础使用
1.1 创建测试项目 vue create vue-routes
1.2 创建成功,启动项目 yarn serve
在 :8080/ 就可以看到欢迎:clap:页面了
1.3 搞点自定义配置,新建vue.config.js
const title = '双11剁手啦' const port = '1111' module.exports = { publicPath: '/wxy', //自定义端口号 devServer: { port }, //自定义变量 configureWebpack: { name: title } }
配置完成后重新启动 yarn serve 效果图
如何配置svg图标
1）准备一个svg，例如： src/icons/svg/hg.svg
2）安装loader yarn add svg-sprite-loader
3）对config进行链式操作即可修改loader
const path = require('path') //处理地址 function resolve(dir) { return path.join(__dirname, dir) } module.exports = { ..., chainWebpack(config) { //安装loader,对config进行链式操作即可修改loader、plugins //1.svg rule中要排除icons目录 config.module.rule('svg') //转换为绝对地址 .exclude.add(resolve('src/icons')) //查看配置后svg规则 vue inspect --rule svg //2.添加一个规则icons config.module.rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')).end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) } }
4）svg rule中要排除icons目录后配置
5） 添加一个规则icons配置
6） 新建 src/components/SvgIcon.vue 模板
<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: "SvgIcon", props: { iconClass: { type: String, required: true }, className: { type: String, default: "" } }, computed: { iconName() { return `#icon-${this.iconClass}`; }, svgClass() { if (this.className) { return "svg-icon " + this.className; } else { return "svg-icon"; } } } }; </script> <style scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
7）新建 src/icons/index.js 在main.js下引入icon
//src/icons/index.js import Vue from 'vue' import SvgIcon from '@/components/SvgIcon' //图标自动加载 const req = require.context('./svg', false, /\.svg$/) req.keys().map(req) Vue.component('svg-icon', SvgIcon) //main.js import "./icons";
8）在App.vue引入图标
<svg-icon icon-class="hg"></svg-icon>
效果如下：
2、router路由守卫
何为守卫，即为阻止无身份者进入组织内部
安装yarn add vue-router 控制路由
安装yarn add vuex 存储身份认证
2.1 路由配置
src/router/index.js
import Vue from "vue"; import Router from "vue-router"; import Layout from '@/layout'; // 布局页 Vue.use(Router); // 通用页面:不需要守卫，可直接访问 export const constRoutes = [ { path: "/login", component: () => import("@/views/Login"), hidden: true // 导航菜单忽略该项 }, { path: "https://www.jb51.net/", component: Layout,// 应用布局 redirect: "/home", children: [ { path: "home", component: () => import(/* webpackChunkName: "home" */ "@/views/Home.vue"), name: "home", meta: { title: "Home", // 导航菜单项标题 icon: "hg" // 导航菜单项图标 } }] }]; // 权限页面:受保护页面，要求用户登录并拥有访问权限的角色才能访问 export const asyncRoutes = [ { path: "/about", component: Layout, redirect: "/about/index", children: [ { path: "index", component: () => import(/* webpackChunkName: "home" */ "@/views/About.vue"), name: "about", meta: { title: "About", icon: "hg", roles: ['admin', 'editor'] }, } ] } ]; export default new Router({ mode: "history", base: process.env.BASE_URL, routes: constRoutes });
布局组件 src/layout
<template> <div> <div> <router-view /> </div> </div> </template>
路由展示src/App.vue