VUE framework, UNIAPP framework: comprehensive detail summary of vue2 to vue3 (1) vue framework: routing mode, routing jump; uniapp framework: storing data writing method, importing data writing method;

 Hello everyone, I am the blogger of csdn: lqj_ myself

This is my personal blog homepage:

lqj_I_Python artificial intelligence vision (opencv) from entry to actual combat, front end, WeChat applet - CSDN Blog

The latest uniapp graduation design column is also placed below:

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

Usually, I will also explain some things that you usually use in the Bilibili video,

Welcome to Bilibili:

Lu Miaoer's personal space-Lu Miaoer's personal homepage-哔哩哔哩Video

Table of contents

vue framework

routing pattern

Routing Jump

uni-app framework

Storage data writing method vue2

Storage data writing method vue3

Introduce data writing method vue2

Introduce data writing method vue3

---

vue framework

routing pattern

Create router is no longer used in Vue3 , but call method: new Router() createRouter

import { createRouter } from 'vue-router'

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

The routing mode mode configuration is changed history , and the property value is adjusted to:

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

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

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

The base path base is createWebHistory passed as the first parameter of (as are other routing patterns):

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

Routing Jump

Use component jump, the way is still the same as Vue2:

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

The most common is programmatic navigation, at which point useRouter methods need to be introduced:

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' })

Note: parameters params cannot be path used with . The RouterLink component to properties router.push()accept the same parameters as the , and the rules for both are exactly the same.

 

uni-app framework

Storage data writing method 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

Storage data writing method vue3

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

export default store

Introduce data writing method 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()

Introduce data writing method 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
  }
}