嵌套路由

src/main.js

@@ -20,11 +20,25 @@ Vue.use(VueRouter) // vue 使用vuerouter
 import bar from './pages/bar.vue'
 import foo from './pages/foo.vue'
 import index from "./pages/index.vue"
+// http://www.baidu.com/adsaw
 
+// http 协议
+// 127.0.0.1 ip  or 域名
+// www.baidu.com 域名 服务器
+// /adsaw/asdxc url 网址路径
 const routes = [
   { path: '/foo', component: foo },
   { path: '/bar', component: bar },
-  { path: '/', component: index }
+  {
+    path: '/index', component: index, children: [
+      {
+        path: 'foo', component: foo, children: [{
+          path: 'aaa', component: bar
+        }]
+      },
+      { path: 'bar', component: bar },
+    ]
+  }
 ]
 
 // router 路由对象

src/pages/foo.vue

@@ -2,6 +2,7 @@
     <div>这是foo
         <router-link to="/bar">到bar</router-link>
         <button @click="getzhi">获取传值</button>
+        <router-view></router-view>
     </div>
 </template>
 <style scoped>

src/pages/index.vue

@@ -1,31 +1,47 @@
 <template>
-  <div>
-    这是首页
-    <!-- 不能用a标签 -->
-    <!-- <a href="/foo">到foo</a> -->
-    <!-- <router-link to="/foo">到foo</router-link> -->
-    <button @click="tiaozhuan">用js replace 跳转</button>
-    <button @click="back">后退一步</button>
-    <router-link :to="{path:'/foo',query:{name:123,age:234,asda:1411}}">到foo</router-link>
+  <div style="display:flex">
+    <div class="menu">
+      <el-menu
+        default-active="2"
+        class="el-menu-vertical-demo menu"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <el-menu-item index="2" @click="toindex">
+          <i class="el-icon-menu"></i>
+          <span slot="title">首页</span>
+        </el-menu-item>
+        <el-menu-item index="3" @click="tobar">
+          <i class="el-icon-document"></i>
+          <span slot="title">bar</span>
+        </el-menu-item>
+        <el-menu-item index="4" @click="tofoo">
+          <i class="el-icon-setting"></i>
+          <span slot="title">foo</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <router-view></router-view>
   </div>
 </template>
 <script>
 export default {
-    methods:{
-        tiaozhuan(){
-            // js this.$router.push
-            // js跳转 (*)
-            // 编程式导航
-            this.$router.push({path:'/foo',query:{name:123,age:234,asda:1411}})
-            // 用这个跳转的时候 当前页面不能被回退 在历史记录中消失了
-            // 
-            // this.$router.replace({path:'/foo',query:{name:123,age:234,asda:1411}})
-        },
-        back(){
-            // 前进或后退多少步 正数是前进 负数是后退
-            // 如果后退 前进 数量不够 他就不会跳转
-            this.$router.go(99999);
-        }
+  methods: {
+    toindex(){
+      this.$router.push("/index")
+    },
+    tobar(){
+      this.$router.push("/index/bar")
+    },
+    tofoo(){
+      this.$router.push("/index/foo")
     }
+  },
+};
+</script>
+<style scoped>
+.menu{
+  width:200px;
+  height: 100vh;
 }
-</script>
+</style>