袁磊老师的课，Vue全家桶（一）

时间  2021-08-15
  • 一、单页面应用spa
    就是只有一张web页面的应用，就是加载单个html。
  1. 优点：页面切换快
  2. 缺点：首屏时间稍慢，SEO（搜索引擎优化）差 “搜索引擎还读不懂单页面，搜索引擎擅长读的是多页面”
  • 二、路由 vue-router
  1. 基本使用：
    <router-link to="/home">主页</router-link> <router-view></router-view>
    点击“主页”，跳转到/home页
  2. 路由具体的写法：（官方）
    HTML文件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JavaScript文件

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

练习：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!-- 点击手机，就会显示手机的组件在<router-view>里 -->
    <div id="app">
      <router-link to="/mobile">手机</router-link>
      <router-link to="/auto">汽车</router-link>
      <router-link to="/mobile">手机</router-link>
      <router-view></router-view>
    </div>

    <!-- !!!!!!!!!注意啦！一定要先引入vue.js再引入vue  router -->
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
      // 组件1 mobile手机的组件，用m代替
      var m = {
        // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
        template: `<div class="box">这是手机的页面！</div>`
      };
      // 组件2  auto汽车的组件，用a代替
      var a = {
        // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
        template: `<div class="box">这是汽车的页面！</div>`
      };
      // 这里面要写的是路的集合，routes，就是哪个路对应哪个组件
      var router = new VueRouter({
        routes: [
          // "/mobile"这个路径对应的component是m
          { path: "/mobile", component: m },
          { path: "/auto", component: a }
        ]
      });

      var vm = new Vue({
        el: "#app",
        // 在这里告知router路由器是上面var出来的router变量
        // 当属性和属性变量是同一个名字的时候，只需要写一个即可，就像下面两行的代码，都是好用的
        // router,
        router: router
      });
    </script>
  </body>
</html>

在这里插入图片描述

  • 三、路由嵌套
  1. 练习：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>子路由</title>
</head>

<body>


    <!-- 现在做的是spa，所有的跳转都是在一个界面里进行的！！！！！！！！！ -->
    <!-- 点击手机，就会显示手机的组件在<router-view>里 -->
    <div id="app">
        <router-link to="/mobile">手机</router-link>
        <router-link to="/auto">汽车</router-link>
        <router-link to="/mobile">手机</router-link>
        <router-view></router-view>
    </div>

    <!-- !!!!!!!!!注意啦！一定要先引入vue.js再引入vue  router -->
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // 组件1 mobile手机的组件，用m代替
        var m = {
            // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
            template: `<div class="box">这是手机的页面！ 
               <router-link to="/mobile/huawei">华为</router-link>
                <router-link to="/mobile/xiaomi">小米</router-link>
                <router-view></router-view>
            </div>`
            // 子组件里也要有！router-view！！！！！
        };
        // 组件2  auto汽车的组件，用a代替
        var a = {
            // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
            template: `<div class="box">这是汽车的页面！</div>`
        };
        // 组件3 手机的子组件华为，用a代替
        var huawei = {
            // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
            template: `<div class="box">这是华为的页面！</div>`
        };
        // 组件4 手机的子组件小米，用a代替
        var xiaomi = {
            // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
            template: `<div class="box">这是小米的页面</div>`
        };
        // 这里面要写的是路的集合，routes，就是哪个路对应哪个组件
        var router = new VueRouter({
            routes: [
                // "/mobile"这个路径对应的component是m
                {
                    path: "/mobile",
                    component: m,
                    // 子路由
                    children: [{
                            path: "/huawei",
                            comment: huawei
                        },
                        {
                            path: "/xiaomi",
                            comment: xiaomi
                        }
                    ]
                },
                {
                    path: "/auto",
                    component: a
                }
            ]
        });

        var vm = new Vue({
            el: "#app",
            // 在这里告知router路由器是上面var出来的router变量
            // 当属性和属性变量是同一个名字的时候，只需要写一个即可，就像下面两行的代码，都是好用的
            // router,
            router: router
        });
    </script>
</body>

</html>

在这里插入图片描述
3. 路由参数定义实现url的传值：
$route.params.cname 需要在路由里定义
$route.query.type 无需定义，使用时在url中用
练习：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>两种传值方法 第一种用？，第二种直接用$route.params.name...</title>
</head>

<body>
    <!-- 现在做的是spa，所有的跳转都是在一个界面里进行的！！！！！！！！！ -->
    <!-- 点击手机，就会显示手机的组件在<router-view>里 -->
    <div id="app">
        <router-link to="/mobile">手机</router-link>
        <router-link to="/auto">汽车</router-link>
        <router-link to="/auto/哈佛">国产畅销汽车</router-link>
        <!-- 上面的这一行代码用$router.params.name这种方式传值，我们需要在上面的/auto  后面加上上面的参数哦，这种方式只能传比较简单的参数哦 -->
        <router-link to="{name:'qiche',params:{ name='五菱之光' }}">国产神车</router-link>
        <!-- 第三种传参的方法中，params可以传复杂的值 -->
        <router-view></router-view>
    </div>

    <!-- !!!!!!!!!注意啦！一定要先引入vue.js再引入vue  router -->
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // 组件1 mobile手机的组件，用m代替
        var m = {
            // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
            template: `<div class="box">这是手机的页面！ 
               <router-link to="/mobile/huawei">华为</router-link>
                <router-link to="/mobile/xiaomi">小米</router-link>
                <router-link to="/mobile/huawei?name=p30">销量冠军</router-link>
                <router-link to="/mobile/huawei?name=mate20">人气冠军</router-link>

                <router-view></router-view>
            </div>`
            // 子组件里也要有！router-view！！！！！
        };
        // 组件2  auto汽车的组件，用a代替
        var a = {
            // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
            // 注意看这里用到的是第二种需要定义的$router.params.name这种方式，那么值如何传进来呢？
            template: `<div class="box">
                <h3>这是汽车的页面！</h3>
                {{$router.params.name}}
            </div>`
        };
        // 组件3 手机的子组件华为，用a代替
        var huawei = {
            // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
            // 在这里可以获得上面router-link中的参数
            template: `<div class="sm">
            <h3>这是华为的页面!</h3>
            {{$router.query.name}}
            </div>`
        };
        // 组件4 手机的子组件小米，用a代替
        var xiaomi = {
            // 这里必须用反引号！！！！！！！！引起注意！！！！！！！！！反引号！！！！！！！
            template: `<div class="sm">这是小米的页面</div>`
        };
        // 这里面要写的是路的集合，routes，就是哪个路对应哪个组件
        var router = new VueRouter({
            routes: [
                // "/mobile"这个路径对应的component是m
                {
                    path: "/mobile",
                    component: m,
                    // 子路由
                    children: [{
                            path: "/huawei",
                            comment: huawei
                        },
                        {
                            // 第三种传值方法哦
                            path: "/xiaomi",
                            comment: xiaomi,
                            name: "qiche"
                        }

                    ]
                },
                {
                    // 第二种传参的方式，这里面就必须要在path中定义一个参数了！
                    path: "/auto/:name",
                    component: a
                }
            ]
        });

        var vm = new Vue({
            el: "#app",
            // 在这里告知router路由器是上面var出来的router变量
            // 当属性和属性变量是同一个名字的时候，只需要写一个即可，就像下面两行的代码，都是好用的
            // router,
            router: router
        });
    </script>
</body>

</html>
联系我们 沪ICP备13005482号-10