欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 2.0路由之路由嵌套示例详解

程序员文章站 2024-01-16 08:38:58
前言 vue一个重要的方面就是路由,下面是自己写的一个路由的例子分享给大家供大家参考学习,下面来看看详细的介绍。 方法如下: 1、引入依赖库就不必再说 2、创建组件...

前言

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 }//路径不存在   <br>    ] 

 }); 

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上,另外还总结了一些自己最近在学习的阿里云上传图片等,会逐步更新,敬请指教!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。