526互联

vue3 使用vue-router 进行网页跳转以及获取问号后面的参数

发布时间 2023-09-04 12:18:22作者: waketzheng

关键代码：

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
  1. vue3使用vue-router
yarn add vue-router nprogress
mkdir src/router
touch src/router/index.ts
  1. 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

<template>
  <el-config-provider namespace="ep">
    <BaseHeader />
    <div class="flex main-container">
      <BaseSide />
      <div w="full" py="4">
        <Logos my="4" />
        <!-- <HelloWorld msg="Hello Vue 3 + Element Plus + Vite" /> -->
        <router-view />
      </div>
    </div>
  </el-config-provider>
</template>

<style>
#app {
  text-align: center;
  color: var(--ep-text-color-primary);
}

.main-container {
  height: calc(100vh - var(--ep-menu-item-height) - 3px);
}
</style>

增加两个页面：

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

Home.vue

<template>
  <el-row>I'm Home</el-row>
  <el-input v-model='who' />
  <el-button @click='gotoEdit(who)'>编辑</el-button>
  <el-button @click='router.push({ name: "Edit" })'>这也是编辑</el-button>
</template>
<script setup lang="ts">
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')
  }
}
</script>

Edit.vue

<template>
  <el-row>Editing</el-row>
  <el-row>author: {{ author }}</el-row>
</template>

<script setup lang="ts">
  const author = ref('')
  const route = useRoute()  // 这句要写在外层，不能在函数里或mounted里

  onMounted(async () => {
    const { query } = route
    if (query && query.author) {
      author.value = query.author
    }
  })
</script>

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