个人网站首页模板,经典网站域名,门户网站制作企业,app下载网站模板大家好#xff0c;我是csdn的博主#xff1a;lqj_本人 这是我的个人博客主页#xff1a; lqj_本人_python人工智能视觉#xff08;opencv#xff09;从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了#xff1a; https://blog.csdn.net/lbcy… 大家好我是csdn的博主lqj_本人 这是我的个人博客主页 lqj_本人_python人工智能视觉opencv从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了 https://blog.csdn.net/lbcyllqj/category_12346639.html?spm1001.2014.3001.5482 平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西 哔哩哔哩欢迎关注 卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频 目录
vue框架
路由模式
路由跳转
uni-app框架
存储数据写法vue2
存储数据写法vue3
引入数据写法vue2
引入数据写法vue3 vue框架
路由模式 Vue3 中不再使用 new Router() 创建 router 而是调用 createRouter 方法 import { createRouter } from vue-routerconst 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/userUser/RouterLink
RouterLink :to{ path: /user, query: { username: 张三 } }User/RouterLink
RouterLink :to{ name: user, params: { username: 李四 } }User/RouterLink最常见的还是编程式导航这时候需要引入 useRouter 方法 import { useRouter } from vue-routerconst 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 vuexVue.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 ./storeVue.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}
}
