腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

vue3.0?router路由跳轉(zhuǎn)傳參問(wèn)題(router.push)

更新時(shí)間：2023年02月15日 10:12:19 作者：普通網(wǎng)友

這篇文章主要介紹了vue3.0?router路由跳轉(zhuǎn)傳參問(wèn)題(router.push)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3 router路由跳轉(zhuǎn)傳參

vue3.0取消了2.0部分api，所以路由跳轉(zhuǎn)傳值方式有所不同。

這里主要講編程式導(dǎo)航，也就是router.push(location, onComplete?, onAbort?)

vue3.0新增API：useRouter和useRoute

路由跳轉(zhuǎn)

1.首先在需要跳轉(zhuǎn)的頁(yè)面引入API—useRouter

import { useRouter } from 'vue-router'

2.在跳轉(zhuǎn)頁(yè)面定義router變量

const router = useRouter()

3.用router.push跳轉(zhuǎn)頁(yè)面

// 字符串
router.push('home')

// 對(duì)象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 帶查詢參數(shù)，變成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

4.如果有參數(shù)的話，在接收頁(yè)面引入API–useRoute

import { useRoute } from 'vue-router'

5.在接收頁(yè)面定義變量route，獲取傳過(guò)來(lái)的變量

//query
let userId=route.query.userId;

//params
let userId=route.params.userId;

頁(yè)面?zhèn)鲄⑿枰⒁獾膯?wèn)題

1.如果提供了path，params會(huì)被忽略，但query沒有這種情況，此時(shí)需要提供路由的name或手寫完整的帶有參數(shù)的path

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

2.上述規(guī)則同樣適用于router-link組件的to屬性

3.如果目的地和當(dāng)前路由相同，只有參數(shù)發(fā)生了改變 (比如從一個(gè)用戶資料到另一個(gè)/users/1->/users/2)，你需要使用[這里是代碼018]來(lái)響應(yīng)這個(gè)變化 (比如抓取用戶信息)

路由(vue-router)配置及語(yǔ)法

來(lái)看一下vue3.0的路由(vue-router)，在看vue3.0路由之前，我們先來(lái)和vue2.0的路由做個(gè)對(duì)比，看看現(xiàn)在兩者之間的區(qū)別。

1、從引入來(lái)說(shuō)

vue2.0 ，通過(guò)vue-router直接引入vueRouter

import VueRouter from "vue-router";

vue3.0，通過(guò)vue-router引入createRouter, createwebHashHistory | createWebHistory

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

2、創(chuàng)建實(shí)例

vue2.0，直接創(chuàng)建vueRouter實(shí)例

const router = new VueRouter({
? mode: "history",
? base: process.env.BASE_URL,
? routes,
});

vue3.0，調(diào)用createRouter方法

const router = createRouter({
? history: createWebHashHistory(),
? routes
});

3、從路由跳轉(zhuǎn)

vue2.0，直接$router

this.$router.push({path: 路徑, query: 參數(shù)})

vue3.0,調(diào)用useRouter方法

import { useRouter } from 'vue-router'
const router = useRouter();
router.push('/')

上面我們看了vue3.0的vue2.0的區(qū)別，那么接下來(lái)

我們看看vue3.0路由(router的寫法)

1、路由表配置

創(chuàng)建router.ts，在其中寫路由

const routes: Array<RouteRecordRaw> = [
? { ??
? ?path: '/', ??
? ?name: 'supplier', ? ?
? ?component: () => import(/* webpackChunkName: "body" */ '../views/supplier/index.vue')?
? ?meta: {
? ? ? ? icon: 'ion:grid-outline',
? ? ? ? title: '供應(yīng)商',
? ? ? ? orderNo: 4,
? ? ? },?
? },?
? {
? ? path: '/login',?
? ? name: 'login',
? ? component: () => import(/* webpackChunkName: "login" */ '../views/user/login/index.vue')
? ? ?meta: {
? ? ? ? title: '登錄',
? ? ? },?
? }
];
exprot default routes

2、路由出口

創(chuàng)建router下的index.ts

// 從vue-router中引入createRouter，以及模式
import {
? createRouter,
? createWebHashHistory
} from 'vue-router'
// 引入routes.ts文件
import routes from './routes.ts'
const router = createRouter({
? history: createWebHashHistory(), //createWebHashHistory是hash模式
? routes
});
?
export default router

3、注入項(xiàng)目

// 在main.ts/js里面
import router from './router'
createApp(App).use(router).mount('#app')

上面就是vue-router的引入以及簡(jiǎn)單配置，那么接下來(lái)看看vue-router的頁(yè)面跳轉(zhuǎn)及傳參

1、頁(yè)面跳轉(zhuǎn)及傳參、

//從vue中引入router
import { useRouter } from "vue-router";
const router = useRouter();
//router 包含router對(duì)象的內(nèi)容；如下圖
// 跳轉(zhuǎn)我們可以使用 router.push()
// 不帶參數(shù)，直接填寫路徑，寫法
router.push('path路徑') || router.push({path: "path路徑"}) ||router.push({name: 'name名字'})
// 帶參數(shù)
router.push({path: 'path路徑', query: '參數(shù)'})
router.push({name: 'name名字', params: '參數(shù)'})

2、接參

// 引入route
import { useRoute } from "vue-router";
const route = useRoute()
// route參數(shù)，如下圖
// 如果對(duì)應(yīng)params傳遞參數(shù)
route.params.參數(shù)值
// 如果使用query傳參
route.query.參數(shù)

以上內(nèi)容就是vue-router里面的參數(shù)以及頁(yè)面跳轉(zhuǎn)，參數(shù)，接參的方式。其中路由中重定向(redirect)，路由守衛(wèi)并沒有變化。那么我們來(lái)看看路由守衛(wèi)的前置守衛(wèi)

路由守衛(wèi)-前置守衛(wèi)(beforeEach)

const WhiteList = ['/login']; // 配置白名單
router.beforeEach((to, from, next)=> {
  if (WhiteList.indexOf(to.fullPath) !== -1) { // 判斷前往頁(yè)面是都存在于白名單
    next()
  } else {
    if (localStorage.getItem('userInfo')) {// 判斷用戶是否d登錄
      if (to.name) { // 判斷是否存在路由的name名字，如果有則代表有路由表已經(jīng)存在，name繼續(xù)前往，反之，則不存在
        next()
      }
      else {// 當(dāng)路由不存在，錄取路由，動(dòng)態(tài)添加路由表，
        let localRoutes: any = localStorage.getItem('routes');
        let recursionList = recursionParam(JSON.parse(localRoutes));
        for (let item of recursionList) {
          router.addRoute(item)
        }
        next({ ...to, replace: true })
      }
    } else {
      next('/login')
    }
  }
});

注意哦：

vue3.0中的addRoute()添加的是路由對(duì)象，而不是整個(gè)路由數(shù)組。

vue2.0是addRoutes()，直接添加路由表的數(shù)組。