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

更新時(shí)間：2017年05月08日 10:21:26 作者：蘇桃子~

這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。

前言

vue一個(gè)重要的方面就是路由，下面是自己寫的一個(gè)路由的例子分享給大家供大家參考學(xué)習(xí)，下面來看看詳細(xì)的介紹。

方法如下：

1、引入依賴庫就不必再說

2、創(chuàng)建組件

兩種寫法

第一種：間接

 <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、創(chuàng)建 router 實(shí)例，傳 'routes'路由映射配置

var router = new VueRouter({

   routes: [

   { path: '/路徑', component: 組件名 },

    { path: '/', component: 組件名}, //設(shè)置默認(rèn)路徑

　　　　　{ path: "*", component:Home }//路徑不存在   <br>　　　　] 

 });

4、創(chuàng)建和掛載根實(shí)例。記得要通過 router 配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能

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>默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 ,to指令跳轉(zhuǎn)到指定路徑 -->

   <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>標(biāo)簽，用于渲染匹配的組件 -->

  <!--這里顯示的是展示的界面-->

  <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、創(chuàng)建組件 */

  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. 創(chuàng)建 router 實(shí)例，然后傳 `routes`路由映射 配置

  var router = new VueRouter({

   routes: [

   { path: '/home', component: Home },

    { path: '/about', component: About },

    { path: '/out', component: Out },

    {path: '/', component: Home },//設(shè)置默認(rèn)路徑

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

   

   ]

  });

 

  // 3. 創(chuàng)建和掛載根實(shí)例。記得要通過 router 配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能

  var vm = new Vue({

    router: router 

  }).$mount('#app');

 

  // 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了！

 </script>

</body>

</html>

關(guān)于路由嵌套

在配置routes映射時(shí)添加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}

  ]

 　　})

關(guān)于具體的demo可以參考GitHub上，另外還總結(jié)了一些自己最近在學(xué)習(xí)的阿里云上傳圖片等，會(huì)逐步更新，敬請指教！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: