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不能加反斜杠

posted @ 2017-03-29 22:40  wmui  阅读(4452)  评论(1)  编辑  收藏  举报