嵌套路由和动态路由匹配
一、嵌套路由：可在单页应用框架下开发多页应用。
思想：嵌套路由其实是 router-view 的细化，router-view 第一层中包含一个 router-view，路由children路由。每一个坑挖好都要对应一个单独的组件。
配置路由对象：在嵌套路由中，下级路由的信息配置在上级路由信息对象的 children 属性里面，children 属性里面可以配置多套路由信息对象。
// 2.创建路由对象 var router = new VueRouter({ // 3.配置路由对象 routes:[ // 4.创建路由匹配的规则 { // 动态路由参数以冒号开头 path:'/home', name:'home', component:Home, // 嵌套路由 children:[ { path:'song', name:'song', component:Song }, { path:'movie', name:'movie', component:Movie } ] } ] });
代码如下:
<div id="app"></div>
<script type="text/javascript" src="../vue/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 地址栏 路由范式
// （1）xxx.html#/user/1 params 动态路由参数
// （2）ooo.html#/user?userId = 1 query
// 1.声明路由组件
var Song = {
template:'<div>我是歌曲组件</div>',
created(){
console.log(this.$route);
console.log(this.$router);
}
}
var Movie = {
template:'<div>我是电影组件</div>',
created(){
console.log(this.$route);
console.log(this.$router);
}
}
// /home/song
// /home/movie
var Home = {
template:`
<div>首页内容
<br/>
<router-link to='/home/song'>歌曲</router-link>
<router-link to='/home/movie'>电影</router-link>
<!-- 路由出口 -->
<router-view></router-view>
</div>
`
}
// 2.创建路由对象
var router = new VueRouter({
// 3.配置路由对象
routes:[
// 4.创建路由匹配的规则
{
// 动态路由参数以冒号开头
path:'/home',
name:'home',
component:Home,
// 嵌套路由
children:[
{
path:'song',
name:'song',
component:Song
},
{
path:'movie',
name:'movie',
component:Movie
}
]
}
]
});
// 5.抛出两个全局组件 router-link router-view
// 抛出两个对象 $router $route（路由信息对象） 挂载到了Vue实例化对象
var App = {
template:`
<div>
<!-- router-link默认会被渲染为a标签，router-view默认会被渲染为herf标签 -->
<router-link :to="{name:'home'}">首页</router-link>
<!-- 6.路由组件的出口 -->
<router-view></router-view>
</div>
`
};
// 6.将配置好的路由关联到vue实例对象中
new Vue({
el:'#app',
router:router,
template:`
<App/>
`,
components:{
App,
router,
}
});
</script>
二、动态路由：组件相同，数据不同。
通过 watch 监听器中的 ‘$route'(to, from){ } 可对路有变化作出响应。
<div id="app"></div>
<script type="text/javascript" src="../vue/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 地址栏 路由范式
// （1）xxx.html#/user/1 params 动态路由参数
// （2）ooo.html#/user?userId = 1 query
// 1.声明路由组件
var ComDesc = {
data(){
return{
msg:''
}
},
template:`
<div>
{{ msg }}
</div>`,
created(){
this.msg = '安卓';
console.log(1);
},
// 监听路由
watch:{
'$route'(to, from){
// 对路由变化作出响应
console.log(to);
console.log(from);
this.msg = to.params.id;
}
}
}
// /timeline/andorid
// /timeline/frontend
var Timeline = {
template:`
<div id='timeline'>
<router-link :to="{name:'comDesc',params:{id:'adroid'}}">安卓</router-link>
<router-link :to="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
<!-- 路由出口 -->
<router-view></router-view>
</div>
`
}
var Pins = {
template:`
<div>我是沸点</div>
`
}
// 2.创建路由对象
var router = new VueRouter({
// 3.配置路由对象
routes:[
// 4.创建路由匹配的规则
{
// 动态路由参数以冒号开头
path:'/timeline',
name:'timeline',
component:Timeline,
children:[
{
path:'/timeline/:id',
name:'comDesc',
component:ComDesc
}
]
},
{
path:'/pins',
component:Pins
}
]
});
// 5.抛出两个全局组件 router-link router-view
// 抛出两个对象 $router $route（路由信息对象） 挂载到了Vue实例化对象
var App = {
template:`
<div>
<!-- router-link默认会被渲染为a标签，router-view默认会被渲染为herf标签 -->
<router-link :to="{name:'timeline'}">首页</router-link>
<router-link to='/pins'>沸点</router-link>
<!-- 6.路由组件的出口 -->
<router-view></router-view>
</div>
`
};
// 6.将配置好的路由关联到vue实例对象中
new Vue({
el:'#app',
router:router,
template:`
<App/>
`,
components:{
App,
router,
}
});
</script>
相同组件，但是数据不同。
版权声明：本文为o(￣ヘ￣o＃)原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。