一、嵌套路由:可在单页应用框架下开发多页应用。
思想:嵌套路由其实是 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>
二、动态路由。
<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>
标签:复杂,component,template,path,var,router,路由 From: https://www.cnblogs.com/sfwu/p/16902996.html