vue-router2.0簡單路由嵌套


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript" src="vue-router.min.js"></script>
</head>

<body>
  <div id="box">
    <!-- 跳轉路徑 -->
    <router-link to="/home">home</router-link>
    <router-link to="/news">news</router-link>
    <div>
      <router-view></router-view>
    </div>
  </div>
  <script type="text/javascript">
  var News = {
    template:` 
    <div>
        <h3>新聞</h3>
        <router-link to="/news/user">子路由</router-link>
        <div><router-view></router-view></div>
    </div>
    `
  };

  var User = {
      template: '<p>我是子路由</p>'
  };

  var Home = {
    template: '<h3>主頁</h3>'
  };
  // 配置路由
  var jump = [{
    path: '/home',
    component: Home
  }, {
    path: '/news',
    component: News,
    // 配置子路由
    children:[{
        // 注意這里的path不要加反斜杠
        path:'user',
        component:User
    }]
  }, {
    path: '*',
    redirect: '/home'
  }];
  // 創建實例
  var router = new VueRouter({
    routes: jump
  });
  // 掛載實例
  var app = new Vue({
    el: '#box',
    router: router
  })
  </script>
</body>

</html>

我相信這個demo都能看懂,子路由的path不能加反斜杠


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM