VUE框架、UNIAPP框架：vue2转vue3全面细节总结（1）vue框架：路由模式、路由跳转；uniapp框架：存储数据写法、引入数据写法；

淼学派对

发布于 2023-10-14 11:15:45

6770

发布于 2023-10-14 11:15:45

文章被收录于专栏：云开发小程序1

vue框架

路由模式

Vue3 中不再使用 new Router() 创建 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() 接受的参数相同，两者的规则也完全相同。

uni-app框架

存储数据写法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
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-08-03，如有侵权请联系 cloudcommunity@tencent.com 删除

存储