vue3 使用vue

2024-07-10 12:40| 来源: 网络整理| 查看: 265

关键代码：

const router = useRouter() const author = 'myname' router.push({ name: 'Edit', query: { author }}) const route = useRoute() const value = route.query.key

详细步骤： 0. Initial

git clone https://github.com/element-plus/element-plus-vite-starter cd element-plus-vite-starter yarn vue3使用vue-router yarn add vue-router nprogress mkdir src/router touch src/router/index.ts src/router/index.ts内容如下： // import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' const routes = [ { path: '/', redirect: '/home', }, { path: '/edit', name: 'Edit', component: () => import('~/views/Edit.vue'), }, { path: '/home', name: 'Home', component: () => import('~/views/Home.vue'), }, ] const router = createRouter({ history: createWebHistory(), routes, }) router.beforeEach(async (to, from) => { NProgress.start() // 显示页面加载进度条 }) router.afterEach(to => { NProgress.done() }) export default router

配置自动引入：

yarn add -D unplugin-vue-components unplugin-auto-import

参考这个：https://element-plus.org/en-US/guide/quickstart.html#on-demand-import 在vite.config.ts中添加：

import AutoImport from 'unplugin-auto-import/vite' AutoImport({ resolvers: [ElementPlusResolver()], imports: [ 'vue', 'vue-router', { axios: [ ['default', 'axios'], // import { default as axios } from 'axios', ], }, ], eslintrc: { enabled: true, filepath: './.eslintrc-auto-import.json', globalsPropValue: true, }, }),

编程式跳转：

// 字符串路径 router.push('/users/eduardo') // 带有路径的对象 router.push({ path: '/users/eduardo' }) // 命名的路由，并加上参数，让路由建立 url router.push({ name: 'user', params: { username: 'eduardo' } }) // 带查询参数，结果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // 带 hash，结果是 /about#team router.push({ path: '/about', hash: '#team' })

修改src/main.ts

import { createApp } from "vue"; import App from "./App.vue"; import router from './routes/'; // import "~/styles/element/index.scss"; import ElementPlus from "element-plus"; // import all element css, uncommented next line import "element-plus/dist/index.css"; // or use cdn, uncomment cdn link in `index.html` import "~/styles/index.scss"; import "uno.css"; // If you want to use ElMessage, import it. import "element-plus/theme-chalk/src/message.scss"; const app = createApp(App); app.use(ElementPlus); app.use(router); app.mount("#app");

src/App.vue

#app { text-align: center; color: var(--ep-text-color-primary); } .main-container { height: calc(100vh - var(--ep-menu-item-height) - 3px); }

增加两个页面：

mkdir src/views touch src/views/Home.vue touch src/views/Edit.vue

Home.vue

I'm Home 编辑这也是编辑 const who = ref('') const router = useRouter() // 这句不能写函数里 const gotoEdit = async (author?: string) => { if (author) { router.push({ name: 'Edit', query: { author } }) // 也可以是： //router.push(`/edit?author=${author}`) } else { router.push({ name: 'Edit' }) // 也可以是： //router.push('/edit') } }

Edit.vue

Editing author: {{ author }} const author = ref('') const route = useRoute() // 这句要写在外层，不能在函数里或mounted里 onMounted(async () => { const { query } = route if (query && query.author) { author.value = query.author } })

See more at: https://router.vuejs.org/zh/guide/essentials/passing-props.html

【本文地址】

vue3 使用vue

vue3 使用vue

今日新闻

推荐新闻