Routerlink跳轉方法
name屬性對應了路由文件配置的name
path屬性對應了路由的路徑
<RouterLink to="/login">點擊跳轉登陸</RouterLink>
<RouterLink :to="{name:'login'}">點擊跳轉登陸</RouterLink>
<RouterLink :to="{path:'/login'}">點擊跳轉登陸</RouterLink>
RouterLink跳轉的傳遞參數寫法
如何傳遞query參數 通過?來表示是query參數 & 來連接多個參數 鍵值對 用 = 來表示
<RouterLink :to="`/login?id=${1}&name=${'張三'}&age=${18}`">點擊跳轉登陸</RouterLink>|<RouterLink :to="{path:'/login', //可使用path或者namequery:{id:1,name:'張三',age:18}}">點擊跳轉登陸</RouterLink>|<RouterLink :to="{name:'login',query:{id:1,name:'張三',age:18}}">點擊跳轉登陸</RouterLink>|//接收參數
let route = useRoute();
let {id,name,age} = route.query;
query參數適合修改詳情頁面 在分頁中拿到該數據所有的參數 帶到詳情頁面將修改頁面的初始值替換成具體參數
如何傳遞params參數 通過修改路由配置文件來制定參數名字
路由配置中
path: '/login/:id/:name/:age?',name: 'login',
如果配置可傳屬性需要在最后加?必須是最后一個參數 保證其清晰的參數名字
params傳參必須用name
params傳參
不能寫對象類型和數組類型
路由跳轉寫法
<RouterLink :to="`/login/${1}/${'張三'}/${18}`">點擊跳轉登陸</RouterLink>|
<RouterLink :to="{name:'login',params:{id:1,name:'張三',age:18}
}">點擊跳轉登陸</RouterLink>//獲取參數
let route = useRoute();
let {id,name,age} = route.params;
params參數適合新聞or展示類的組件 在分頁或者主頁獲取到文章ID或者詳情ID 跳轉到詳情頁 拿到ID請求整個詳情頁面的數據接口
路由props傳參
路由配置中的寫法
{path: '/login',//登陸頁面name: 'login',component:Login,// props:true,//將params參數傳遞給組件props(route) { //將路由信息傳遞給組件return route.query},}, <RouterLink :to="{name:'login',query:{id:1,name:'張三',age:18}}">點擊跳轉登陸</RouterLink>|//or<RouterLink :to="{name:'login',params:{id:1,name:'張三',age:18}}">點擊跳轉登陸</RouterLink>|//獲取參數
defineProps(['id','name','age'])
函數式路由跳轉 ——最常用
const router = useRouter();//獲取路由實例 useRouter 需要從vuerouter中引入 router.push({ //query參數 path跳轉路由path: item.path,query: {id: item.id,name: item.name,componentName: item.componentName}});router.push({ //params傳參 使用name跳轉路由name: item.componentName,params: {id: item.id,name: item.name,componentName: item.componentName,path: item.path}});router.replace({ // replace 無前進后退記錄跳轉路由name: item.componentName,params: {id: item.id,name: item.name,componentName: item.componentName,path: item.path}});
自動導入vue、vuerouter中的函數和方法
https://blog.csdn.net/HarryHY/article/details/148543123?spm=1001.2014.3001.5501
)