溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關一文帶你讀懂vue路由，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
前端路由和后端路由：
在單頁面應用程序中這種通過hash來改變頁面的方式稱作前端路由區別于后端路由
路由的使用
1.創建一個路由對象，當導入vue-router包之后，在window全局對象中就有一個路由的構造函數VueRouter
2.在new路由對象的時候可以傳遞一個配置對象，這個配置對象的route表示路由器的匹配規則
3.每個路由規則都是一個對象，這個規則對象身上必須有兩個屬性
var login={
template:'<h3>登錄</h3>'
}
var register={
template:'<h3>注冊</h3>'
}
var routerObj=new VueRouter({
routes:[
{path:'/login',component:login},
{path:'/register',component:register}
]
})4.router:routerObj將路由規則對象注冊到VM實例上，用來監聽URL地址的變化，然后展示對應的組件
var vm=new Vue({
el:'#div1',
data:{
},
methods:{
},
router:routerObj
})5.在控制的div中使用
<router-view></router-view>
6.在搜索欄輸入對應的匹配規則，login
7.使用vue官方提供的router-link元素使用，它默認渲染為一個a標簽
<router-link to="/login">登錄</router-link> <router-link to="/register">注冊</router-link>
路由重定向
1.設置一個默認展示組件，不推薦
{path:'/',component:login},2.路由redirect重定向，設置默認組件
{path:'/',redirect:'login'},路由傳參
1.如果使用查詢字符串 給路由傳遞參數則不需要修改路由規則的path屬性
<router-link to="/login?id=10">登錄</router-link>
2.使用query傳遞參數
var login={
template:'<h3>登錄----{{$route.query.id}}</h3>'
}
3.通過params方式傳遞路由參數，login后面會被解析為id的值
<router-link to="/login/12">登錄</router-link>
var login={
template:'<h3>登錄----{{$route.params.id}}</h3>'
}{path:'/login/:id',component:login},路由的嵌套
使用children屬性實現路由嵌套,子路由path前不要加/，否則永遠以根路徑開始請求
<div id="div1"
<router-link to="/account">account</router-link>
<router-view></router-view>
</div>
<template id="tmp1">
<div>
<h3>account 組件</h3>
<router-link to="/account/login">登錄</router-link>
<router-link to="/account/register">注冊</router-link>
<router-view></router-view>
</div>
</template>var router=new VueRouter({
routes:[
{path:'/account',component:account,
children:[
{path:'login',component:login},
{path:'register',component:register}
]}
]
})命名視圖
命名視圖在components（這時會多個s）后加屬性再在使用<router-view></router-view>的時候用name引入,可以使一個頁面中存在多個路由
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>var router=new VueRouter({
routes:[
{path:'/',components:{
default:header,
left:leftBox,
main:mainBox
}},
]
})以上就是一文帶你讀懂vue路由，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
