1. First you must have a node.js environment (if not, please go to site b to find tutorials) 2. Open the location where you want to create the file. I use vscode. Here, open a terminal and run npm create vue@latest Complete the following selections: 3. Delete the files under components in the newly created […]
Tag: vue-router
Routing (vue-router)
Routing Complete a SPA single-page application to achieve an effect similar to that of a native app. There will be no white screen when switching, improving user experience. Essence Render different component pages based on different URLs Route creation Creation of first-level routing 1. Create the corresponding routing page component in the views folder 2. […]
vue-router implements dynamic routing and buttons
Article directory 1. Prepare a complete routing and button tree 2. Assemble the structure tree of routing and buttons, and save the initial overall structure 3. When to judge whether routing and buttons should be displayed? 4. Setting interface I have recorded a dynamic routing implementation process before, but recently I felt that it was […]
The VUE framework uses vue-router to achieve the page jump effect with information——VUE framework
<template> <div> <el-row> <el-col :span=”24″><div class=”grid-content bg-purple-dark”><h1>My Music</h1></div></el-col> </el-row> <el-row> <el-col :span=”8″><div class=”grid-content bg-purple”><router-link to=”/my/1″>Product 1</router-link></div>< /el-col> <el-col :span=”8″><div class=”grid-content bg-purple-light”><router-link to=”/my/2″>Product 2</router-link></div ></el-col> <el-col :span=”8″><div class=”grid-content bg-purple”><router-link to=”/my/3″>Product 3</router-link></div>< /el-col> </el-row> <router-view></router-view> </div> </template> <style> .el-row { margin-bottom: 20px; } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; […]
Vue3+Vue-Router+Element-Plus implements front-end dynamic routing based on back-end data – permission management module
Tip: Read the content of the article carefully, or directly paste and copy, the effect is full Article directory Preface 1. Technology stack 2. Project structure 3. Menu components and data 1.AsideMenu.vue component 2. LeftSubMenu.vue 3. menuData.json data 4. Router configuration 1. router/index.js 2. permission.js (same level as main.js) 3.main.js 5. Effect 6. Give likes […]
Vue-Router routing (1)
Routing The concept of routing The essence of routing is a correspondence (the routing meaning here is the same as the previous nodejs routing). According to different URL requests, different resources are returned. Then there is a corresponding relationship between the url address and the real resource, which is routing. Routing is divided into: Back-end […]
vue-router
1. What is vue-router Since vue is a single-page application, when we package it and run npm run build, the dist folder will be generated. There are only static resources and an index.html page, so when we use hyperlinks to jump to the page Sometimes it doesn’t work, because there is only one page that […]
vue-router uses (route jump, related api, page jump with data, multi-level routing, route guard, two working modes of the router), series (localStorage, sessionStorage), combined api and configuration item api
1 vue-router usage 1 vue-router use 1.1 Route jump 1.2 Related APIs 1.3 Page jump, carrying data 1.4 Multi-level routing 1.5 Route guard 1.6 Two working modes of the router 2 localStorage, sessionStorage, cookie 3 vue3 introduction 4 Combined API and configuration item API 1 vue-router use -In the future, it is the switching of […]
vue+vue-router implements background management page
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Title</title> <style> body {<!– –> margin: 0; } .header {<!– –> height: 48px; background-color: #499ef3; line-height: 48px; } .header a {<!– –> color: white; text-decoration: none; padding: 0 10px; } .body .left-menu {<!– –> width: 180px; border: 1px solid #dddddd; border-bottom: 0; position: absolute; left: 1px; top: 50px; […]
Vue2+Vue-RouterV3 implements permission management
Table of Contents 1. Say it in front 1. Realize 2. Permission list 2. Page permissions 1. Realize the effect 2. Ideas and implementation 3. Menu permissions 1. Realize the effect 2. Implement ideas 3. Operation permissions 1. Through custom instructions 2. Through v-if 3. There is another kind of table operation (as shown in […]