一宁否、使用的方法和組件：
1踊赠、new VueRouter({}) 多個(gè)配置項(xiàng)
2、routes[]? 一般路由
3星著、path:'‘’路徑??? component:about 這個(gè)是取名 實(shí)際路徑
4费韭、redirect:''? path:'' 自動(dòng)跳轉(zhuǎn)
5蓬衡、import router from './router'
6矾睦、注冊路由 new Vue(){router? }
7悟衩、使用路由組標(biāo)簽<router-link> 用來生成路由鏈接<router-view> 用來顯示當(dāng)前路由組件
8箱歧、children: [] 放入嵌套路由
9矾飞、setTimeout 這個(gè)可以設(shè)置多少秒之后顯示
二、實(shí)例代碼
2.1呀邢、項(xiàng)目結(jié)構(gòu)圖
2.2洒沦、代碼
Home.vue
? ? <h2>Home
? ? ? <ul class="nav nav-tabs">
? ? ? ? <li><router-link to="/home/news">News
? ? ? ? <li><router-link to="/home/message">Message
? export default {}
Message.vue
? ? ? <li v-for="(message)in messages" :key="message.id">
? ? ? ? <a href="">{{message.title}}
? export default {
name:'Message',
? ? data () {
return {
messages: []
}
},
? ? mounted () {
// 模擬ajax請求從后臺獲取數(shù)據(jù)
? ? ? setTimeout(() => {
const messages = [
{
id:1,
? ? ? ? ? ? title:'message01'
? ? ? ? ? },
? ? ? ? ? {
id:2,
? ? ? ? ? ? title:'message01'
? ? ? ? ? },
? ? ? ? ? {
id:3,
? ? ? ? ? ? title:'message01'
? ? ? ? ? }
]
this.messages = messages
}, 1000)
}
}
<style scoped>
News.vue
? ? ? <li v-for="(news,index)in list" :key='index'>
? ? ? ? {{news}}
? export default {
name:'News',
? ? data () {
return {
list: [
'news1',
? ? ? ? ? 'news2',
? ? ? ? ? 'news3',
? ? ? ? ? 'news4'
? ? ? ? ]
}
}
}
<style scoped>
index.js
/**
路由器模塊
**/
import Vuefrom 'vue'
import VueRouterfrom 'vue-router'
import Aboutfrom '../views/About.vue'
import Homefrom '../views/Home.vue'
import Messagefrom '../views/Message.vue'
import Newsfrom '../views/News.vue'
Vue.use(VueRouter)
export default new VueRouter({
// 配置N個(gè)路由
? routes: [
{
path:'/about',
? ? ? component: About
},
? ? {
path:'/home',
? ? ? component: Home,
? ? ? // 配置嵌套路由
? ? ? children: [
{
path:'/home/message',
? ? ? ? ? component: Message
},
? ? ? ? {
path:'/home/news',
? ? ? ? ? component: News
},
? ? ? ? {
path:'',
? ? ? ? ? redirect:'/home/news'
? ? ? ? }
]
},
? ? {
path:'/',
? ? ? redirect:'/about'
? ? }
]
})
三、demo實(shí)現(xiàn)效果：
