效果相似掘金導航, 導航切換 html
![]()
![]()
1.1 引入路由文件vue
<script src="./vue-router.js"></script>
複製代碼
1.2 準備路由須要的組件react
var index = Vue.component('index',{
template:'<div>首頁</div>'
})
var productType = Vue.component('productType',{
template:'<div>這裏顯示商品編號</div>'
})
複製代碼
1.3 建立路由對象, 在這個對象裏面配置路由規則vue-router
const router = new VueRouter({
})
複製代碼
1.4 經過routes屬性配置路由規則,編程
他是一個數組, 數組中放的是對象, 每一個對象對應一條規則, 數組
而且每一個對象裏面都含有name(表示路由規則名稱)/path(表示路徑)/component(表示路徑對應的組件)屬性app
const router = new VueRouter({
routes:[
{name:'index', path:'/index', component:index},
{name:'productType', path:'/product_type', component:productType}
]
})
複製代碼
1.5 在vue實例中注入路由, 這樣整個應用程序都會擁有路由了ide
var vm = new Vue({
el: '#app',
// 5. 在vue實例中注入路由, 這樣整個應用程序都會擁有路由了
router,
data: {
}
})
複製代碼
1.6 經過router-view挖坑, 路徑匹配到的組件都會渲染到這個組件來ui
<div id="app">
<router-view></router-view>
</div>
複製代碼
1.7 vue路由中經過router-link去作跳轉, 他有一個to屬性, to屬性的值必須和path中的值對應this
router-link未來會被渲染成爲a標籤, 他的to屬性會被渲染成a標籤的href屬性, 但它的值前面會加一個#,變爲錨點
<div id="app">
<ul>
<li><router-link to="/index">首頁</router-link></li>
<li><router-link to="/product_type">蔬菜</router-link></li>
<li><router-link to="/product_type">水果</router-link></li>
<li><router-link to="/product_type">肉類</router-link></li>
</ul>
<router-view></router-view>
</div>
複製代碼
2.1 router傳遞參數
<div id="app">
<ul>
<li><router-link to="/index">首頁</router-link></li>
<li><router-link to="/product_type/11">蔬菜</router-link></li>
<li><router-link to="/product_type/22">水果</router-link></li>
<li><router-link to="/product_type/33">肉類</router-link></li>
</ul>
<router-view></router-view>
</div>
複製代碼
const router = new VueRouter({
routes:[
{name:'index', path:'/index', component:index},
{name:'productType', path:'/product_type/:id', component:productType}
]
})
複製代碼
2.2 接收參數
2.2.1 組件接收參數
在html中獲取路由參數, 經過$route.params.參數名
var productType = Vue.component('productType',{
//在html中獲取路由參數, 經過$route.params.參數名
template:'<div>這裏顯示商品編號{{$route.params.id}}</div>',
})
複製代碼
2.2.2 js接收參數
在js中獲取路由參數, 經過this.$route.params.參數名
var productType = Vue.component('productType',{
//在html中獲取路由參數, 經過$route.params.參數名
template:'<div>這裏顯示商品編號{{$route.params.id}}</div>',
//模板編譯完成以後調用
mounted() {
//在js中獲取路由參數, 經過this.$route.params.參數名
console.log(this.$route.params.id)
},
})
複製代碼
提醒一下,當使用路由參數時,例如從 /user/foo
導航到 /user/bar
,原來的組件實例會被複用。由於兩個路由都渲染同個組件,比起銷燬再建立,複用則顯得更加高效。不過,這也意味着組件的生命週期鉤子不會再被調用。
3.1 複用組件時,想對路由參數的變化做出響應的話,你能夠簡單地 watch (監測變化) $route
對象:
var productType = Vue.component('productType',{
data(){
return {
allProduct:''
}
},
//在html中獲取路由參數, 經過$route.params.參數名
template:` <div> 這裏顯示商品編號{{$route.params.id}} <p>{{allProduct}}</p> </div> `,
//模板編譯完成以後調用
mounted() {
//在js中獲取路由參數, 經過this.$route.params.參數名
console.log(this.$route.params.id)
},
watch: {
//to表示你將要去的路由對象, from表示你從哪一個路由來
'$route'(to,from){
console.log(to)
console.log(from)
if(to.params.id==='11'){
this.allProduct = '葫蘆不等等'
}else if(to.params.id==='22'){
this.allProduct = '西瓜'
}else{
this.allProduct = '豬肉/牛肉'
}
}
}
})
複製代碼
3.2 或者使用 2.2 中引入的 beforeRouteUpdate
導航守衛:
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
複製代碼
嵌套路由
![]()
4.1 嵌套路由
4.1.1 嵌套路由建立
const router = new VueRouter({
routes:[
{name:'index', path:'/index', component:index},
{name:'productType', path:'/product_type/:id', component:productType,
children:[
//嵌套中的path不能加'/'
{name:'cookBook', path:'cook_book',component:cookBook}
]
}
]
})
複製代碼
var cookBook = Vue.component('cookBook]',{
template:'<div>我這裏不少食譜, 歡迎查看</div>'
})
複製代碼
4.1.2 在被嵌套的組件中佔坑''
var productType = Vue.component('productType',{
template:` <div> 這裏顯示商品編號{{$route.params.id}} <p>{{allProduct}}<button @click='jumpTo'>查看食譜</button></p> <router-view></router-view> </div> `
})
複製代碼
4.2 編程式導航
經過 '<button @click='jumpTo'>查看食譜' 跳轉
var productType = Vue.component('productType',{
template:` <div> 這裏顯示商品編號{{$route.params.id}} <p>{{allProduct}}<button @click='jumpTo'>查看食譜</button></p> <router-view></router-view> </div> `
})
methods: {
jumpTo(){
//經過$router來跳轉
this.$router.push({name:'cookBook'})
}
},
複製代碼
重定向也是經過
routes
配置來完成
{name:'default',path:'*',redirect: '/index'},
複製代碼
重定向的目標也能夠是一個命名的路由:
{name:'default',path:'*',redirect: {name:'index'}}
複製代碼
甚至是一個方法,動態返回重定向目標:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目標路由 做爲參數
// return 重定向的 字符串路徑/路徑對象
}}
]
})
複製代碼