admin

10_vuecli/helloworld/src/App.vue

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

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

@@ -1,22 +1,35 @@
+// import 语句 用于导入模块中的内容
+// 引入 vue 
 import Vue from 'vue'
+// 引入 vue router
 import VueRouter from 'vue-router'
+// 引入 首页组件
+// ../ 表示返回上一级文件夹
+// 当前引入模式为同步引入(预加载) 一般用作与首页
 import HomeView from '../views/HomeView.vue'
 
 Vue.use(VueRouter)
-
+// 路由配置 里面为路由规则 每个路由规则都是一个对象 每一个对象也是一个页面
 const routes = [
   {
+    // path 路由路径
     path: '/',
+    // name 路由名称
     name: 'home',
+    // component 路由组件 页面文件的地址
     component: HomeView
   },
   {
     path: '/about',
     name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    // 同样也表示引入页面组件 但是这里使用了异步引入（懒加载 需要显示页面的时候才加载）
+    component: () => import('../views/AboutView.vue')
+  },
+  {
+    // 路由路径小写
+    path: '/pageone',
+    name: 'pageone',
+    component: () => import('../views/PageOne.vue')
   }
 ]
 

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

@@ -0,0 +1,30 @@
+<!-- template 模版 表示当前vue文件的html结构 -->
+<template>
+    <!-- template模版内部 只以包含一个根元素 -->
+     <!-- 所有html代码只能写在当前跟标签（div） 内-->
+    <div>
+        <h1>PageOne</h1>
+        <p class="text">{{ msg }}</p>
+    </div>
+</template>
+<script>
+    //vue 文件 中 可以包含script 标签
+    // export default 表示导出一个默认的vue组件(vue 文件)
+    export default {
+        // 组件的名称
+        name: 'PageOne',
+        // 组件的data 他是一个函数 并且返回了一个 { }
+        data(){
+            return{
+                msg: 'hello vue'
+            }
+        }
+    }
+</script>
+
+<!-- vue 组件的样式 可以在vue文件中 写style 标签 内部 -->
+<style>
+    .text{
+        color: red;
+    }
+</style>