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

相关阅读:
Eloquent ORM模型中添加自定义值
wget
带坑的几道PHP面试题
php字符型转整型
SELECT 1
GD库
Windows下.svn文件夹的最简易删除方法(附linux)
svn 撤销修改
mysql应用基本操作语句（转）
i春秋broken

原文地址：https://www.cnblogs.com/yesyes/p/6642233.html