Vue Router動(dòng)態(tài)路由使用方法總結(jié)
更新時(shí)間：2023年10月02日 14:10:08 投稿：wdc
這篇文章主要介紹了Vue Router動(dòng)態(tài)路由使用方法總結(jié),需要的朋友可以參考下
作用：動(dòng)態(tài)拼接一些路徑
語(yǔ)法：/user/:userId(:XX表示可以動(dòng)態(tài)拼接，路徑可以渲染成/user/zhangsan或者/user/lisi等等)
1.通過(guò)router-link渲染的跳轉(zhuǎn)頁(yè)面
通過(guò)動(dòng)態(tài)綁定to屬性后面跟著動(dòng)態(tài)路由來(lái)跳轉(zhuǎn)頁(yè)面(:to="’/about/’+info")
Router-Index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const About = () => import('../views/About.vue');
const routes = [
{
path: '/about/:info',
component: About
}
];
const router = new VueRouter({
routes,
mode: 'history',
linkActiveClass: 'active'
});
export default router;App.vue
<template>
<div>
<!-- 通過(guò)router-link動(dòng)態(tài)路由傳參 -->
<router-link :to="'/about/'+info">About</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
info: 'hello vuejs'
}
}
}
</script>
<style>
.active {
color: #1890ff;
}
</style>About.vue
<template>
<div>
<h2>About</h2>
<!-- 可以通過(guò)($route.params.動(dòng)態(tài)傳參)獲取數(shù)據(jù) -->
<p>{{ $route.params.info }}</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
<style>
</style>2.通過(guò)普通標(biāo)簽渲染的跳轉(zhuǎn)頁(yè)面
通過(guò)this.$router.push(’/user/’ + this.userId)獲取數(shù)據(jù)
Router-Index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const User = () => import('../views/User.vue');
const routes = [
{
path: '/user/:userId',
component: User
}
];
const router = new VueRouter({
routes,
mode: 'history',
linkActiveClass: 'active'
});
export default router;App.vue
<template>
<div>
<!-- 通過(guò)普通button動(dòng)態(tài)路由傳參 -->
<button @click="userClick">用戶</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
userId: 'zhangsan'
}
},
methods: {
userClick() {
this.$router.push('/user/' + this.userId);
}
}
}
</script>
<style>
.active {
color: #1890ff;
}
</style>User.vue
<template>
<div>
<h2>User</h2>
<p>{{ $route.params.userId }}</p>
</div>
</template>
<script>
export default {
name: 'User'
}
</script>
<style>
</style>到此這篇關(guān)于Vue Router動(dòng)態(tài)路由使用方法總結(jié)的文章就介紹到這了,更多相關(guān)Vue Router動(dòng)態(tài)路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇解決vue組件中click事件失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題
下面小編就為大家分享一篇解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
文章介紹了Vue中`ref`的的三種用法,以及`attrs`父子組件之間值傳遞的方法,此外,還講解了`v-model`、`props`和`$attrs`的的使用問(wèn)題,以及`sync`的的簡(jiǎn)單寫(xiě)法,最后提醒大家在使用這些語(yǔ)法糖時(shí)要確保代碼的正確性和可易的性2026-05-05
基于Vue開(kāi)發(fā)一個(gè)很火的卡片動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue開(kāi)發(fā)一個(gè)很火的卡片動(dòng)畫(huà)效果,大致包含兩個(gè)效果,光的跟隨效果還有卡片傾斜像?3D?的效果,感興趣的可以了解一下2024-02-02
vue-axios同時(shí)請(qǐng)求多個(gè)接口 等所有接口全部加載完成再處理操作
這篇文章主要介紹了vue-axios同時(shí)請(qǐng)求多個(gè)接口 等所有接口全部加載完成再處理操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例
本文主要介紹了vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue3中的任何一個(gè)組合式api都可以單獨(dú)抽離出去在另一個(gè)文件，最后只需要回歸到setup()中即可，這篇文章主要介紹了vue3的抽離封裝方法,需要的朋友可以參考下2022-08-08
眾所周知,當(dāng)容器高度固定而內(nèi)容部分高度超出容器高度時(shí),瀏覽器會(huì)渲染出一個(gè)可以滾動(dòng)并用于顯示剩余界面的條 -- 滾動(dòng)條,它可以簡(jiǎn)單的樣式修改,但是位置是固定的,無(wú)法移動(dòng),而我們需要改變位置的時(shí)候,它就不能滿足我們的需求了,這時(shí)我們可以自己手寫(xiě)一個(gè)2023-10-10
Vue?Mock.js介紹和使用與首頁(yè)導(dǎo)航欄左側(cè)菜單搭建過(guò)程
Mock.js是一個(gè)模擬數(shù)據(jù)的生成器，用來(lái)幫助前端調(diào)試開(kāi)發(fā)、進(jìn)行前后端的原型分離以及用來(lái)提高自動(dòng)化測(cè)試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁(yè)導(dǎo)航欄左側(cè)菜單搭建,需要的朋友可以參考下2023-09-09
vue3?reactive響應(yīng)式依賴收集派發(fā)更新原理解析
這篇文章主要為大家介紹了vue3響應(yīng)式reactive依賴收集派發(fā)更新原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03