【vue入门手册】十一、动态路由 && 登录注册

简介: 【vue入门手册】十一、动态路由 && 登录注册

嵌套路由

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 动态组件

  1. Vue 嵌套路由可以应用于多层嵌套的页面结构,比如管理后台系统中常见的多级单和子菜单。
  2. Vue 动态组件可以用于一些页面内容动态变化的场景,比如用户登录状态不同时,需要显示不同的组件。

路由传参

  1. 显示传参  query
  2. 隐式传参  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;
    },
  },
})


相关文章
|
4月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
78 3
|
4月前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
106 1
|
4月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
3月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
174 0
|
4月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
130 0
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
145 1
|
3天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
7天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
55 12
|
3天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。

热门文章

最新文章