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

 大家好，我是csdn的博主：lqj_本人

这是我的个人博客主页：

lqj_本人_python人工智能视觉（opencv）从入门到实战,前端,微信小程序-CSDN博客

最新的uniapp毕业设计专栏也放在下方了：

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

平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西，

哔哩哔哩欢迎关注：

卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频

目录

vue框架

路由模式

路由跳转

uni-app框架

存储数据写法vue2

存储数据写法vue3

引入数据写法vue2

引入数据写法vue3

---

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 = storeconst 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}
}