皆さんこんにちは。私は csdn のブロガーです: lqj_ 自身

これは私の個人的なブログのホームページです。

lqj_I_Python 人工知能ビジョン (opencv) 入門から実戦まで、フロントエンド、WeChat アプレット - CSDN ブログ

最新のuniapp卒業デザインコラムも以下に掲載しています。

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

普段Bilibili動画でよく使っていることについても解説していきますので、

ビリビリへようこそ:

Lu Miaoer の個人スペース-Lu Miaoer の個人ホームページ-哔哩哔哩ビデオ

vueフレームワーク

ルーティングパターン

vueフレームワーク

ルーティングパターン

Create router はVue3 では使用されなくなりましたが、次のメソッドを呼び出します。 new Router() createRouter
import { createRouter } from 'vue-router'

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

ルーティングモードmode 設定が変更されhistory 、属性値が次のように調整されます。

"history"=>createWebHistory()

"hash"=>createWebHashHistory()

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

createRouter({
  history: createWebHistory(),
  routes: []
})
基本パスは、(他のルーティングパターンと同様に) の最初のパラメータとして渡されますbase 。createWebHistory
import { createRouter, createWebHistory } from 'vue-router'
createRouter({
  history: createWebHistory('/base-url/'),
  routes: []
})

ルーティングジャンプ

コンポーネントジャンプを使用します。方法は Vue2 と同じです。
<RouterLink to="/user">User</RouterLink>
<RouterLink :to="{ path: '/user', query: { username: '张三' } }">User</RouterLink>
<RouterLink :to="{ name: 'user', params: { username: '李四' } }">User</RouterLink>
最も一般的なのはプログラムによるナビゲーションで、この時点でuseRouter メソッドを導入する必要があります。
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' })
注: パラメーターはと一緒に使用params できませんpath 。RouterLink コンポーネントのto プロパティはrouter.push()と同じパラメータを受け入れ、両方のルールはまったく同じです。

ユニアプリフレームワーク

ストレージデータ書き込み方法 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

ストレージデータ書き込み方法 vue3

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

export default store

データ書き込み方法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()

データ書き込み方法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
  }
}

vueフレームワーク

ルーティングパターン

ルーティングジャンプ

ユニアプリフレームワーク

ストレージデータ書き込み方法 vue2

ストレージデータ書き込み方法 vue3

データ書き込み方法vue2の紹介

データ書き込み方法vue3の紹介

おすすめ