admin

10_vuecli/helloworld/src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <nav>
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>｜
+      <router-link to="/about/100">About</router-link>｜
       <!-- router-link 路由链接 组件 用于跳转到指定路由路径 -->
        <!-- to 路由路径 用于指定转转的路由路径  使用的就是routejs中的path -->
       <router-link to="/pageone">PageOne</router-link>

10_vuecli/helloworld/src/router/index.js

@@ -20,7 +20,7 @@ const routes = [
     component: HomeView
   },
   {
-    path: '/about',
+    path: '/about/:id',
     name: 'about',
     // 同样也表示引入页面组件 但是这里使用了异步引入（懒加载 需要显示页面的时候才加载）
     component: () => import('../views/AboutView.vue')
@@ -29,7 +29,19 @@ const routes = [
     // 路由路径小写
     path: '/pageone',
     name: 'pageone',
-    component: () => import('../views/PageOne.vue')
+    component: () => import('../views/PageOne.vue'),
+    children: [
+      {
+        path: '/pageone/childone',
+        name: 'childone',
+        component: () => import('../views/ChildOne.vue')
+      },
+      {
+        path: '/pageone/childtwo',
+        name: 'childtwo',
+        component: () => import('../views/ChildTwo.vue')
+      }
+    ]
   }
 ]
 

10_vuecli/helloworld/src/views/AboutView.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="about">
+  <div class="about text">
     <h1>This is an about page</h1>
+    <h1>当前参数id：{{ $route.params.id }}</h1>
   </div>
 </template>
+<script>
+  export default {
+    name: 'AboutView',
+    // 使用生命周期函数刷新页面的时候获取路由参数
+    mounted() {
+      // 在js中获取路由参数 前面需要使用this
+      console.log(this.$route.params.id)
+    }
+  }
+</script>

10_vuecli/helloworld/src/views/ChildOne.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="childone">
+        <h1>ChildOne</h1>
+        <p>当前路由参数id：{{ $route.params.id }}</p>
+        <p>当前路由参数a：{{ $route.params.a }}</p>
+    </div>
+</template>

10_vuecli/helloworld/src/views/ChildTwo.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="childtwo">
+        <h1>ChildTwo</h1>
+        <!-- <p>当前路由参数id：{{ $route.params.id }}</p>
+        <p>当前路由参数b：{{ $route.params.b }}</p> -->
+        <p>当前路由参数id：{{ $route.query.id }}</p>
+        <p>当前路由参数b：{{ $route.query.b }}</p>
+    </div>
+</template>
+<script>
+  export default {
+    name: 'ChildTwo',
+    // 使用生命周期函数刷新页面的时候获取路由参数
+    mounted() {
+      // 在js中获取路由参数 前面需要使用this
+      console.log(this.$route.query.id)
+    }
+  }
+</script>

10_vuecli/helloworld/src/views/PageOne.vue

@@ -1,30 +1,42 @@
 <!-- template 模版 表示当前vue文件的html结构 -->
 <template>
     <!-- template模版内部 只以包含一个根元素 -->
-     <!-- 所有html代码只能写在当前跟标签（div） 内-->
+    <!-- 所有html代码只能写在当前跟标签（div） 内-->
     <div>
         <h1>PageOne</h1>
         <p class="text">{{ msg }}</p>
+        <!-- <router-link to="/pageone/childone">子页面一</router-link>｜
+        <router-link to="/pageone/childtwo">子页面二</router-link> -->
+
+        <!-- params 路由参数 表示在路由中传递的参数 在地址栏没有展示数据 刷新页面容易导致参数丢失 -->
+        <router-link v-bind:to="{name:'childone',params:{id:100,a:'hello'}}">子页面一</router-link>｜
+        <!-- <router-link v-bind:to="{name:'childtwo',params:{id:200,b:'world'}}">子页面二</router-link> -->
+        <!-- query 路由参数 表示在路由中传递的参数 在地址栏展示所有数据 刷新页面不会丢失参数 -->
+        <router-link v-bind:to="{path:'/pageone/childtwo',query:{id:200,b:'world'}}">子页面二</router-link>
+
+        <!--router-view 路由出口 表示当前路由匹配到的组件 会渲染到当前路由出口的位置 -->
+        <router-view/>
     </div>
 </template>
 <script>
-    //vue 文件 中 可以包含script 标签
-    // export default 表示导出一个默认的vue组件(vue 文件)
-    export default {
-        // 组件的名称
-        name: 'PageOne',
-        // 组件的data 他是一个函数 并且返回了一个 { }
-        data(){
-            return{
-                msg: 'hello vue'
-            }
+//vue 文件 中 可以包含script 标签
+// export default 表示导出一个默认的vue组件(vue 文件)
+export default {
+    // 组件的名称
+    name: 'PageOne',
+    // 组件的data 他是一个函数 并且返回了一个 { }
+    data() {
+        return {
+            msg: 'hello vue'
         }
     }
+}
 </script>
 
 <!-- vue 组件的样式 可以在vue文件中 写style 标签 内部 -->
-<style>
-    .text{
-        color: red;
-    }
+<!-- scoped 用于表示当前样式只作用于当前组件的范围 只能作用于当前组件的html结构 -->
+<style scoped>
+.text {
+    color: red;
+}
 </style>