vue2.0路由-路由嵌套详解编程语言

vue一个重要的方面就是路由，下面是自己写的一个路由的例子：

1、引入依赖库就不必再说

2、创建组件

两种写法

第一种：间接 

 template id="home" 

 div 

 h1 Home /h1 

 p {{msg}} /p 

 /div 

 /template 

 var About = Vue.extend({ 

 template: #about 

 }); 

第二种：直接 

 var Out = Vue.extend({ 

 template:  div h1 Out /h1 p This is the tutorial out vue-router. /p /div  

 }); 

3、创建 router 实例，传 routes 路由映射配置

 var router = new VueRouter({ 

 routes: [ 

 { path: /路径, component: 组件名 }, 

 { path: /, component: 组件名}, //设置默认路径 

 { path: "*", component:Home }//路径不存在 
 ] 

 }); 

4、创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能

 var vm = new Vue({ 

 router: router 

 }).$mount(#app); 

整体的demo

 !DOCTYPE html 

 html lang="en" 

 head 

 meta charset="UTF-8" 

 title hello world /title 

 /head 

 body 

 div id="app" 

 div 

 !-- 4、 router-link 默认会被渲染成一个 ` a ` 标签 ,to指令跳转到指定路径 -- 

 router-link to="/home" Go to Home /router-link 

 router-link to="/about" Go to About /router-link 

 router-link to="/out" Go to Out /router-link 

 /div 

 !-- 5、在页面上使用 router-view /router-view 标签，用于渲染匹配的组件 -- 

 !--这里显示的是展示的界面-- 

 router-view /router-view 

 /div 

 template id="home" 

 div 

 h1 Home /h1 

 p {{msg}} /p 

 /div 

 /template 

 template id="about" 

 div 

 h1 about /h1 

 p This is the tutorial about vue-router. /p 

 /div 

 /template 


 !-- 0、引入依赖库 -- 

 script src="../js/vue2.0.js" type="text/javascript" charset="utf-8" /script 

 script src="lib/vue-router.min.js" type="text/javascript" charset="utf-8" /script 

 script type="text/javascript" 

 /* 1、创建组件 */ 

 var Home = Vue.extend({ 

 template: #home, 

 data: function() { 

 return { 

 msg: Hello, vue router! 

 }); 

 var About = Vue.extend({ 

 template: #about 

 }); 

 var Out = Vue.extend({ 

 template:  div h1 Out /h1 p This is the tutorial out vue-router. /p /div  

 }); 

 // 2. 创建 router 实例，然后传 `routes`路由映射 配置 

 var router = new VueRouter({ 

 routes: [ 

 { path: /home, component: Home }, 

 { path: /about, component: About }, 

 { path: /out, component: Out }, 

 {path: /, component: Home },//设置默认路径 

 { path: "*", component:Home }//路径不存在 

 }); 

 // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能 

 var vm = new Vue({ 

 router: router 

 }).$mount(#app); 

 // 现在，应用已经启动了！ 

 /script 

 /body 

 /html 

关于路由嵌套

在配置routes映射时添加children配置

如下：

var router = new VueRouter({ 

 routes:[ 

 {path:/home,component:Home, 

 children:[//子路由 

 {path:news,component:News}, 

 {path:change,component:change} 

 ]}, 

 {path:/me,component:Me}, 

 {path:/,component:Me} 

关于具体的demo可以参考GitHub上，另外还总结了一些自己最近在学习的阿里云上传图片等，会逐步更新，敬请指教！

 转载请注明出处，谢谢合作

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/13864.html