vue路由组件实现Hash路由案例，Gitee的Git版本控制流程-vue-54课9.10

1、vue路由组件实现Hash路由案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../lib/vue.js"></script>
    <!-- 路由包 -->
    <script src="../lib/vue-router-dev/dist/vue-router.js"></script>
    <title>Vue路由的原理</title>
  </head>
  <body>
    <div class="app">
      <!-- 1. 使用router-link组件来生成导航<a></a> -->
      <router-link to="/news1">科技</router-link>
      <router-link to="/news2">教育</router-link>
      <router-link to="/news3">美食</router-link>
      <!-- 2. 路由内容的渲染 -->
      <router-view></router-view>
    </div>
    <script>
      const news1 = {
        template: "<p>1. 使用vue路由组件</p>",
      };
      const news2 = {
        template: "<p>2. 基于Hash的路由案例</p>",
      };
      const news3 = {
        template: "<p>3. Gitee的Git版本控制流程</p>",
      };
      // 注册路由
      const router = new VueRouter({
        // 配置
        routes: [
          // 是一个对象数组,每个对象对应一个路由
          { path: "/news1", component: news1 },
          { path: "/news2", component: news2 },
          { path: "/news3", component: news3 },
        ],
      });
      // vue实例
      const vm = new Vue({
        // 将路由注册到挂载点中
        // 当属性名与变量同名,只需要写一个
        router,
      }).$mount(".app");
    </script>
  </body>
</html>

2、Gitee的Git版本控制流程

工作区：
1、创建文件夹git-edu
2、在它下面再创建两个文件：demo1.html、index.php
# 切换到需要使用git进行版本控制的项目目录中
cd git-edu
# 配置用户名和邮箱
git config --global user.name melinda
git config user.name
git config --global user.email '123456@qq.com'
git config user.email
或者git config --list也能检查
clear清除
# git 版本库的初始化: 创建本地版本库
git init
# 创建版本库的忽略文件 .gitignore
.git/
# 将工作区的已经修改过的文件, 提交到本地版本库中的暂存区
git add . # 一次性全部提交完毕
git status # 查看状态
# 再将所有的内容从本地暂存区一次性的提交到本地的版本库
git commit -m '2020-9-13 21:06'
# 添加远程版本库
在这个网站https://gitee.com注册并新建仓库
https://gitee.com/melinda2020/git-edu
找到克隆下载，复制：https://gitee.com/melinda2020/git-edu.git
复制下面的代码在下面的终端生成
git remote add origin https://gitee.com/melinda2020/git-edu.git
git remote add origin https://gitee.com/用户个性地址/HelloGitee.git
# 查看远程仓库
git remote -v
得到以下两个地址
origin  https://gitee.com/melinda2020/git-edu.git (fetch)
origin  https://gitee.com/melinda2020/git-edu.git (push)
提交到本地
git commit -m 'melinda'
# 提交到远程仓库
git push origin master
git push -u origin master
git push -f origin master
# 从远程仓库拉取内容
git pull https://gitee.com/melinda2020/git-edu.git
git pull origin master

总结：
vue路由原理：根据路由/锚点的不同, 显示不同的内容

1、vue路由组件实现Hash路由案例

2、Gitee的Git版本控制流程

相关文章