嵌套路由
Vue 嵌套路由可以应用于多层嵌套的页面结构，比如管理后台系统中常见的多级单和子菜单。
示例代码
// 全局引入 import Home from "@/views/home/home" import Top from "@/views/home/top" import Gril from "@/views/home/gril" import Foot from "@/views/home/food" Vue.use(VueRouter) const routes = [ { // 路由元信息，路由携带的信息标识 meta: { title: "首页", }, path: '/home', // 路由path路径，浏览器输入的地址 name: 'home', // 路由的名称（别名）方便在js中触发路由 component: Home, // 对应路由渲染的页面模板。可通过import 按需加载 children: [{ path: "/", // path 为“/” 是设置默认展示的二级页面 component:Top // component: import(/* webpackChunkName:"top" */ "@/views/home/top.vue") }, { path: "food",//子路由path无效使用“/” 否则url缺少一级路径 component:Foot, // component: import(/* webpackChunkName:"food" */ "@/views/home/food.vue") }, { path: "girl", component:Gril // component: import(/* webpackChunkName:"gril" */ "@/views/home/gril.vue") }] } ]
嵌套路由 vs 动态组件
- Vue 嵌套路由可以应用于多层嵌套的页面结构，比如管理后台系统中常见的多级单和子菜单。
- Vue 动态组件可以用于一些页面内容动态变化的场景，比如用户登录状态不同时，需要显示不同的组件。
路由传参
- 显示传参 query
- 隐式传参 params
注意：隐式传参需要使用 name 名称来跳转，否则无法接收 parmas 参数
<!--显示传参 query --> this.$router.push({ path:"/detail", // query 传参，参数会在url中显示出来 // 如何隐式传参？ query:{ id:data.id, title:data.title } }) // 如何隐式传参？ this.$router.push({ // path:"/detail", // 使用path跳转，parmas 参数不生效，需要使用name name:"detail", params:{ id:data.id, title:data.title } })
<template> <div> 详情页 <!-- query 接参数 --> {{ $route.query.id }} {{ $route.query.title }} <!-- params 接参数 --> {{ $route.params.id }} {{ $route.params.title }} </div> </template>
路由重定向 && 配置404页面
// 路由重定向 { path: '/', // 未输入路径时，默认访问home首页 redirect: '/home' }, { path: '*', ////匹配未定义的路由 redirect: '/404' // 访问404页面 }
动态路由
登录注册
功能
1、表单校验 - 必填项
2、验证码展示
接口
1、获取验证码
2、登录 （校验验证码正确性）
3、注册 （校验验证码正确性）
在 webpack 中配置 devSever 中间件，来完成服务端接口
示例代码如下
const { defineConfig } = require('@vue/cli-service') let { goosList } = require("./src/mock/index") // 生成验证码 var svgCaptcha = require("svg-captcha") // 生成session var session = require('express-session') // bodyParser 解析请求中的bodyjson格式 var bodyParser = require("body-parser") // 生成toekn var jwt = require("jsonwebtoken") // 需要一个token私钥 var appkey = 'aaaaaa' module.exports = defineConfig({ transpileDependencies: true, // devserve 起一个接口服务 devServer: { setupMiddlewares: (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined'); } // 如果你想在所有其他中间件之前运行一个中间件或者当你从 `onBeforeSetupMiddleware` 配置项迁移时， // 可以使用 `unshift` 方法 // 从服务中间件中获取 express 实例 const {app} = devServer // // bodyParser 解析请求中的bodyjson格式 app.use(bodyParser()) // 配置session中间件 app.use(session({ secret: 'keyboard cat', })) // req 前端请求头 app.get("/getSvgCode",(req,res)=>{ // 生成 svg验证码图片 // 创建一个svg对象 var captcha = svgCaptcha.create(); // 将验证码文本存放缓存中 req.session.captcha = captcha.text; // 设置返回数据的格式 res.type('svg'); res.status(200).send(captcha.data); }) // 用户注册接口 app.post('/register', (req, res) => { req.session.user = req.body; if (req.session.captcha.toLowerCase() !== req.body.imgCode.toLowerCase()) { res.status(200).send({ code:"error", msg:"验证码错误" }) } else { res.status(200).send({ code:"ok", msg:"注册成功" }) } }) // 登录接口 app.post('/login', (req, res) => { const sessionUser = req.session.user; const user = req.body console.log('user',req,user) // 校验验证码 if (req.session.captcha.toLowerCase() == user.imgCode.toLowerCase()) { // 校验用户账号密码 if (sessionUser && user.username == sessionUser.username && user.password == sessionUser.password) { // 生成token var token = jwt.sign(user, appkey, { expiresIn: '1h' }) // var token = jwt.sign(user, tokenkey,{ expiresIn: '1h' });//设置token 1小时过期； res.status(200).send({ code:"ok", msg:"登录成功", ...user, token }) } else { res.status(200).send({ code:"error", msg:"登录错误，请核实账号" }) } } else { res.status(200).send({ msg:"验证码失效", code:"error" }) } }) // 获取验证码 app.get('/getCode', (req, res) => { // 创建一个svg验证码 var captcha = svgCaptcha.create(); // 将验证码文本存储到服务端session上,用于登录注册时校验 req.session.captcha = captcha.text; // 设置返回头类型，否则前端无法接受 res.type('svg') // res.set("Content-Type","image/svg+xml"); res.status(200).send(captcha.data) }) middlewares.unshift({ name: 'first-in-array', // `path` 是可选的 path: '/getGoods', middleware: (req, res) => { // console.log('mock',goosList) res.send(goosList); }, }); return middlewares; }, }, })
