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">用戶(hù)</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中輕量級(jí)模糊查詢(xún)fuse.js使用方法步驟
這篇文章主要給大家介紹了關(guān)于vue中輕量級(jí)模糊查詢(xún)fuse.js使用方法的相關(guān)資料,Fuse.js是一個(gè)功能強(qiáng)大、輕量級(jí)的模糊搜索庫(kù),通過(guò)提供簡(jiǎn)單的?api?調(diào)用,達(dá)到強(qiáng)大的模糊搜索效果,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue項(xiàng)目搭建過(guò)程，使用NPM方式搭建的，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
動(dòng)畫(huà)詳解Vue3的Composition?Api
為讓大家更好的理解Vue3的Composition?Api本文采用了詳細(xì)的動(dòng)畫(huà)演繹，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
隨著前端的快速發(fā)展，非常多的js框架被應(yīng)用到項(xiàng)目中。Vue.js本身支持對(duì)組件的異步加載,配合Webpack的分塊打包功能,可以極其輕松地實(shí)現(xiàn)組件的異步按需加載。 這篇文章是webpack+vue.j的入門(mén)教程，有需要的可以參考借鑒。2016-10-10
Vue項(xiàng)目開(kāi)發(fā)實(shí)現(xiàn)父組件與子組件數(shù)據(jù)間的雙向綁定原理及適用場(chǎng)景
在 Vue.js 中,實(shí)現(xiàn)父組件與子組件數(shù)據(jù)之間的雙向綁定,可以通過(guò)以下幾種方式,下面我將介紹幾種常見(jiàn)的方法,并解釋它們的實(shí)現(xiàn)原理和適用場(chǎng)景,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要給大家介紹了關(guān)于Vue攔截器原理以及詳細(xì)使用的相關(guān)資料,Vue攔截器通常用于在發(fā)送請(qǐng)求或響應(yīng)數(shù)據(jù)時(shí)對(duì)其進(jìn)行一些處理或修改,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
Vue 組件組織結(jié)構(gòu)及組件注冊(cè)詳情
這篇文章主要介紹的是Vue 組件組織結(jié)構(gòu)及組件注冊(cè)，為了能在模板中使用，這些組件必須先注冊(cè)以便 Vue 能夠識(shí)別。這里有兩種組件的注冊(cè)類(lèi)型：全局注冊(cè)和局部注冊(cè)。至此，我們的組件都只是通過(guò) Vue.component 全局注冊(cè)的，文章學(xué)詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-10-10
解決VMware中vmware-vmx.exe進(jìn)程無(wú)法關(guān)閉以及死機(jī)等問(wèn)題
這篇文章主要介紹了解決VMware中vmware-vmx.exe進(jìn)程無(wú)法關(guān)閉以及死機(jī)等問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue對(duì)象或者數(shù)組中數(shù)據(jù)變化但是視圖沒(méi)有更新問(wèn)題及解決
這篇文章主要介紹了vue對(duì)象或者數(shù)組中數(shù)據(jù)變化但是視圖沒(méi)有更新問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了如何利用Vue3制作簡(jiǎn)單的消消樂(lè)游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試2022-05-05