marco VUE, marco UNIAPP: resumen completo y detallado de vue2 a vue3 (1) marco vue: modo de enrutamiento, salto de enrutamiento, marco uniapp: método de escritura de datos de almacenamiento, método de escritura de datos de importación;

 Hola a todos, soy el blogger de csdn: lqj_ mismo

Esta es la página de inicio de mi blog personal:

lqj_I_Python visión de inteligencia artificial (opencv) desde la entrada hasta el combate real, front-end, subprograma WeChat - CSDN Blog

La última columna de diseño de graduación uniapp también se coloca a continuación:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

Por lo general, también explicaré algunas cosas que sueles usar en el video de Bilibili,

Bienvenido a Bilibili:

Espacio personal de Lu Miaoer-Página personal de Lu Miaoer-哔哩哔哩Video

Tabla de contenido

marco vue

patrón de enrutamiento

Salto de enrutamiento

marco uni-aplicación

Método de escritura de datos de almacenamiento vue2

Método de escritura de datos de almacenamiento vue3

Introducir el método de escritura de datos vue2

Introducir el método de escritura de datos vue3

---

marco vue

patrón de enrutamiento

Crear enrutador ya no se usa en Vue3 , pero llama al método: new Router() createRouter

import { createRouter } from 'vue-router'

const router = createRouter({
  // ...
})

La mode configuración del modo de enrutamiento se cambia history y el valor del atributo se ajusta a:

• "history"=>createWebHistory()
• "hash"=>createWebHashHistory()
• "abstract"=>createMemoryHistory()

import { createRouter, createWebHistory } from 'vue-router'
// createWebHashHistory 和 createMemoryHistory (SSR相关) 同理

createRouter({
  history: createWebHistory(),
  routes: []
})

La ruta base base se createWebHistory pasa como el primer parámetro de (al igual que otros patrones de enrutamiento):

import { createRouter, createWebHistory } from 'vue-router'
createRouter({
  history: createWebHistory('/base-url/'),
  routes: []
})

Salto de enrutamiento

Use el salto de componente, la forma sigue siendo la misma que Vue2:

<RouterLink to="/user">User</RouterLink>
<RouterLink :to="{ path: '/user', query: { username: '张三' } }">User</RouterLink>
<RouterLink :to="{ name: 'user', params: { username: '李四' } }">User</RouterLink>

El más común es la navegación programática, momento en el que useRouter se deben introducir métodos:

import { useRouter } from 'vue-router'

const router = useRouter()

// 字符串路径
router.push('/user')

// 带有路径的对象
router.push({ path: '/user', query: { username: '张三' } })
router.push({ path: '/user', hash: '#team' })

// 带有命名的对象
router.push({ name: 'user', query: { username: '张三' } })
router.push({ name: 'user', params: { username: '李四' } })
router.push({ name: 'user', hash: '#team' })

Nota: los parámetros params no se pueden path usar con . Las to propiedades del componente RouterLink router.push()aceptan los mismos parámetros que el , y las reglas para ambos son exactamente las mismas.

 

marco uni-aplicación

Método de escritura de datos de almacenamiento vue2

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state:{
    "username":"xiaomi",
    "age":22
  }
})
export default store

Método de escritura de datos de almacenamiento vue3

import { createStore } from 'vuex'
const store = createStore({
  state:{
    "username":"xiaomi",
    "age":22
  }
})

export default store

Introducir el método de escritura de datos vue2

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

const app = new Vue({
  store,
  ...App
})
app.$mount()

Introducir el método de escritura de datos vue3

import App from './App'
import store from './store'
import {createSSRApp} from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  return {
    app
  }
}