个人自学前端31-Vue8-单页应用SPA，路由Vue Router

DarkCrow

目录

一. 单页应用SPA

传统的网页或者App会有很多页面
传统的网页都是开发很多的html页面来充当分页
Vue框架就不好实现多html页面的网页应用

Vue的路由用于实现单页应用
单页应用 => SPA => single page appliation => 一个网站只会一个html

单页应用如何开发别的单页？
单页应用的分页统统通过Vue组件来开发 => 一个页面对应一个组件
因此网站页面的切换 => Vue组件的切换 => 动态组件切换

单页应用(App应用)相比传统的网站项目的优缺点

  • 优点:
    利于开发.
    分页加载不需要请求服务器,响应快.切换平滑,用户体验好.
  • 缺点:
    对seo优化不友好.(分页是组件,切换分页,url相当于没跳转)
    seo(PC): 搜索引擎优化,提高网站排名.(不算前端技术,运营的技术)
    首屏加载比较慢.

二. 路由

vue路由需要使用一个vue-router的插件来实现。
vue-router是vue的插件,因此需要在引入Vue之后引入
4XX的版本是为Vue3的路由版本.Vue2需要使用3xx的版本.

路由的写法：

  1. 实例化路由.(写路由选项 => 路由组件和路由路径的对应关系)
  2. 挂载路由实例
  3. 挂载路由视图(router-view 这是一个动态组件,会自动切换成你的路由组件)

路由组件切换的核心逻辑 => 路径改变驱动路由组件切换.

  <script>
    const Home = {
      template: `
        <div>
          <h3>首页</h3>
        </div>
      `
    }
    const News = {
      template: `
        <div>
          <h3>新闻</h3>
        </div>
      `
    }
    const Sport = {
      template: `
        <div>
          <h3>体育</h3>
        </div>
      `
    }
    // 实例化路由
    const router = new VueRouter({
      // 路由组件和路由路径的对应关系 => 路由选项
      routes: [
        {
          // 路由路径
          path: \'/home\',
          // 路由组件
          component: Home
        }, {
          // 路由路径
          path: \'/news\',
          // 路由组件
          component: News
        }, {
          // 路由路径
          path: \'/sport\',
          // 路由组件
          component: Sport
        }
      ]
    })
    const App = {
      template: `
        <div>
          <a href=\'#home\'>首页</a>
          <a href=\'#news\'>新闻</a>
          <a href=\'#sport\'>体育</a>
          <router-view />
        </div>
      `
    };
    new Vue({
      render: h => h(App),
      // 挂载路由
      router
    }).$mount(\'#app\');
  </script>

可以使用router-link内置组件来代替a标签.
router-link最终渲染时,还是被渲染成a标签.

    const App = {
      template: `
        <div>
          <router-link to=\'/home\'>首页</router-link>
          <router-link to=\'/news\'>新闻</router-link>
          <router-link to=\'/sport\'>体育</router-link>
          <router-view />
        </div>
      `
    };

2. 重定向 redirect

    const router = new VueRouter({
      routes: [
        {
          // 当你的路径是/时,把路径变成/home
          path: \'/\',
          // 重定向到home
          redirect: \'/home\'
        }
      ]
    })

3. 编程式导航

挂载理由实例之后,任何组件都可以通过$router来访问到这个路由实例.
路由实例方法push可以实现跳转.参数是:

  1. 字符串的path.
  2. 纯对象.

路由实例方法replace也可以实现跳转.参数和push的一致.
和push的区别是不会把当前页面添加到页面栈内.

  <script>
    const App = {
      template: `
        <div>
          <button @click=\'toPage("home")\'>首页</button>
          <button @click=\'toPage("news")\'>新闻</button>
          <button @click=\'toPage("sport")\'>体育</button>
          <router-view />
        </div>
      `,
      methods: {
        // 编程式导航
        toPage(path) {
          // location.hash = \'#/\' + path

          // 路由实例.
          // console.log(this.$router);

          // Vue路由的跳转方法。
          // this.$router.push(\'/\' + path);
          // this.$router.push(\'/home\');

          // 传纯对象.路径选项path指定跳转的路径
          // this.$router.push({ path: \'/\' + path});

          // 传纯对象,选项name是路由选项的name命名(必须保证路由选项有命名)
          // this.$router.push({ name: path });

          // 不会把当前页面加入到页面栈
          // this.$router.replace({ name: path });

          // 前进
          // this.$router.forward();
          // 后退
          // this.$router.back();
          // 指定跳转
          // this.$router.go(1);
        }
      }
    };
  </script>

三. 嵌套路由

嵌套路由 => 路由组件视图内又有另一个路由视图

  <script>
    const Home = {
      template: `
        <div>
          <h3>首页</h3>
          <router-link to=\'/home/phone\'>手机</router-link>
          <router-link to=\'/home/computer\'>电脑</router-link>
          <router-link to=\'/home/pad\'>ipad</router-link>
          <router-view />
        </div>
      `
    }
    const News = {
      template: `<div><h3>新闻</h3></div>`
    }
    const Sport = {
      template: `<div><h3>体育</h3></div>`
    }
    const Phone = {
      template: `<h3>手机</h3>`
    }
    const Computer = {
      template: `<h3>电脑</h3>`
    }
    const Pad = {
      template: `<h3>ipad平板</h3>`
    }
    // 子路由
    const childRoutes = [
      {
        path: \'/home/phone\',
        component: Phone,
        name: \'phone\'
      }, {
        path: \'/home/computer\',
        component: Computer,
        name: \'computer\'
      }, {
        path: \'/home/pad\',
        component: Pad,
        name: \'pad\'
      }, {
        path: \'/\',
        redirect: \'/home/phone\'
      }
    ];
    // 父路由
    const routes = {
      // 路由组件和路由路径的对应关系 => 路由选项
      routes: [
        {
          // 路由路径
          path: \'/\',
          // 路由组件
          component: Home,
          // Home组件内的子路由,需要配置children选项
          children: childRoutes
        }, {
          path: \'/news\',
          component: News
        }, {
          path: \'/sport\',
          component: Sport
        }
      ]
    }
    // 实例化路由
    const router = new VueRouter(routes)
    const App = {
      template: `
        <div>
          <router-link to=\'/\'>首页</router-link>
          <router-link to=\'/news\'>新闻</router-link>
          <router-link to=\'/sport\'>体育</router-link>
          <router-view />
        </div>
      `
    };
    new Vue({
      render: h => h(App),
      // 挂载路由
      router
    }).$mount(\'#app\');
  </script>

1.嵌套路由的路径写法

    // 子路由
    const childRoutes = [
      {
        path: \'phone\',
        component: Phone,
        name: \'phone\'
      }, {
        path: \'computer\',
        component: Computer,
        name: \'computer\'
      }, {
        path: \'pad\',
        component: Pad,
        name: \'pad\'
      }
    ];

    // 父路由
    const routes = {
      // 路由组件和路由路径的对应关系 => 路由选项
      routes: [
        {
          // 路由路径
          path: \'/home\',
          // 路由组件
          component: Home,
          // Home组件内的子路由,需要配置children选项
          children: childRoutes,
          // path等于/home时,重定向到\'/home/phone\'
          redirect: \'/home/phone\'
        }, {
          path: \'/news\',
          component: News
        }, {
          path: \'/sport\',
          component: Sport
        }, {
          path: \'/\',
          redirect: \'/home\'
        }
      ]
    }

2.嵌套路由的跳转问题

    const Login = {
      template: `
        <div id=\'login\'>
          <input type="text">
          <input type="password">
          <button @click=\'toPage\'>登录</button>
        </div>
      `,
      methods: {
        toPage() {
          // this.$router.push(\'/home\');
          // this.$router.push(\'/home/news\');
          // this.$router.push(\'/home/music\');

          // this.$router.push({ name: \'home\' });

          // 如果跳转到二级路由组件,name需要写二级路由的name.
          // this.$router.push({ name: \'music\' });
        }
      }
    }

3.路由的组件关系

Home和News和Sport这些路由组件都是App的子组件
App可以通过props给这些路由组件传递数据,以及实现状态管理.

  <script>
    const Home = {
      template: `
        <div>
          <h3>首页---{{count}}</h3>
          <input type=\'text\' />
        </div>
      `,
      props: [\'count\']
    }
    const News = {
      template: `
        <div>
          <h3>新闻---{{count}}</h3>
        </div>
      `,
      props: [\'count\']
    }
    const Sport = {
      template: `
        <div>
          <h3>体育---{{count}}</h3>
          <input type=\'text\' />
        </div>
      `,
      props: [\'count\']
    }
    const router = new VueRouter({
      routes: [
        {
          path: \'/home\',
          component: Home
        }, {
          path: \'/news\',
          component: News
        }, {
          path: \'/sport\',
          component: Sport,
        }, {
          // 当你的路径是/时,把路径变成/home
          path: \'/\',
          // 重定向到home
          redirect: \'/home\'
        }
      ]
    });
    const App = {
      template: `
        <div>
          <router-link to=\'/home\'>首页</router-link>
          <router-link to=\'/news\'>新闻</router-link>
          <router-link to=\'/sport\'>体育</router-link>
          <button @click=\'count++\'>count++</button>
          <router-view :count=\'count\' />
        </div>
      `,
      data() {
        return {
          count: 0
        }
      }
    };
    new Vue({
      render: h => h(App),
      // 挂载路由
      router
    }).$mount(\'#app\');
  </script>

四.缓存跳转路由的组件

// activated => 激活,显示
// deactivated => 失活,隐藏
<keep-alive include=\'缓存的组件\' exclude=\'排除的组件\'>
  <router-view />
</keep-alive>

分类：

技术点：

相关文章：

  • 2021-10-25
  • 2021-09-30
  • 2021-05-17
  • 2021-11-05
  • 2018-08-21
  • 2021-11-23
  • 2021-07-11
猜你喜欢
  • 2022-12-23
  • 2021-10-10
  • 2021-04-15
  • 2021-09-18
  • 2022-12-23
  • 2021-04-17
  • 2021-07-02
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode