一、使用的方法和组件：
1、new VueRouter({}) 多个配置项
2、routes[] 一般路由
3、path:'‘’路径 component:about 这个是取名 实际路径
4、redirect:'' path:'' 自动跳转
5、import router from './router'
6、注册路由 new Vue(){router }
7、使用路由组标签<router-link> 用来生成路由链接<router-view> 用来显示当前路由组件
8、children: [] 放入嵌套路由
9、setTimeout 这个可以设置多少秒之后显示
二、实例代码
2.1、项目结构图
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请求从后台获取数据
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个路由
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实现效果：
