一、锚点的概念

案例:百度百科

特点:单页Web应用,预先加载页面内容

形式:url#锚点

二、路由的作用

Vue.js 路由允许我们通过锚点定义不同的 URL, 达到访问不同的页面的目的,每个页面的内容通过延迟加载渲染出来。

通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)

三、路由实例

创建文件夹router_pro

1、复制js资源

vue.min.js

vue-router.min.js

2、创建 路由.html

3、引入js

  1. <script src="vue.min.js"></script>
  2. <script src="vue-router.min.js"></script>

4、编写html

  1. <div id="app">
  2. <h1>Hello App!</h1>
  3. <p>
  4. <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  5. <!-- 通过传入 `to` 属性指定链接. -->
  6. <router-link to="/">首页</router-link>
  7. <router-link to="/student">会员管理</router-link>
  8. <router-link to="/teacher">讲师管理</router-link>
  9. </p>
  10. <!-- 路由出口 -->
  11. <!-- 路由匹配到的组件将渲染在这里 -->
  12. <router-view></router-view>
  13. </div>

5、编写js

  1. <script>
  2. // 1. 定义(路由)组件。
  3. // 复杂的组件也可以从独立的vue文件中引入
  4. const Welcome = { template: '<div>欢迎</div>' }
  5. const Student = { template: '<div>student list</div>' }
  6. const Teacher = { template: '<div>teacher list</div>' }
  7. // 2. 定义路由
  8. // 每个路由应该映射一个组件。
  9. const routes = [
  10. { path: '/', redirect: '/welcome' }, //设置默认指向的路径
  11. { path: '/welcome', component: Welcome },
  12. { path: '/student', component: Student },
  13. { path: '/teacher', component: Teacher }
  14. ]
  15. // 3. 创建 router 实例,然后传 `routes` 配置
  16. const router = new VueRouter({
  17. routes // (缩写)相当于 routes: routes
  18. })
  19. // 4. 创建和挂载根实例。
  20. // 从而让整个应用都有路由功能
  21. new Vue({
  22. el: '#app',
  23. router
  24. })
  25. // 现在,应用已经启动了!
  26. </script>

前端知识(二)08-Vue.js的路由-谷粒学院的更多相关文章

  1. 前端知识(一)04 Vue.js入门-谷粒学院

    目录 一.介绍 1.Vue.js 是什么 2.初识Vue.js 二.基本语法 1.基本数据渲染和指令 2.双向数据绑定 3.事件 4.修饰符 5.条件渲染 6.列表渲染 7.实例生命周期 一.介绍 1 ...

  2. 前端开发之走进Vue.js

    Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...

  3. 【前端芝士树】Vue.js面试题整理 / 知识点梳理

    [前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...

  4. 为什么43%前端开发者想学Vue.js

    根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学的前端库.我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因. 我最近曾与Evan ...

  5. vue.js之路由

    Vue.js本身只提供数据与视图绑定及组件化等功能,如果想用它来开发一个完整的SPA(单页面应用),我们就还需要使用一些Vue.js的插件.今天我学习一种叫做Vue-router的插件,用来提供路由管 ...

  6. Vue.js高效前端开发 • 【初识Vue.js】

    全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...

  7. Vue.js之路由系统

    Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...

  8. Vue.js:路由

    ylbtech-Vue.js:路由 1.返回顶部 1. Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue. ...

  9. vue.js嵌套路由-------由浅入深

    嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...

随机推荐

  1. C#中的深度学习(四):使用Keras.NET识别硬币

    在本文中,我们将研究一个卷积神经网络来解决硬币识别问题,并且我们将在Keras.NET中实现一个卷积神经网络. 在这里,我们将介绍卷积神经网络(CNN),并提出一个CNN的架构,我们将训练它来识别硬币 ...

  2. 对路径binroslyn..的访问被拒绝

    一开始的解决办法就是把bin下的文件都删除了,但是roslyn文件夹下的部分文件一直被占用,必须进程中把vbcscompiler进程干掉,才能删除,再重新编译,就没问题了.

  3. Word2Vec和LDA的区别与联系

    Word2vec是目前最常用的词嵌入模型之一.是一种浅层的神经网络模型,他有2种网络结构,分别是CBOW(continues bag of words)和 skip-gram.Word2vec 其实是 ...

  4. Java基础集合简单总结

    集合 Collection单列集合有List 和 Set List集合有: ArrayList集合 特点: 1.存取有序 可以重复 有索引 2.底层是数组实现,查询快,增删慢 ArrayList底层: ...

  5. [leetcode]200. Number of Islands岛屿数量

    dfs的第一题 被边界和0包围的1才是岛屿,问题就是分理出连续的1 思路是遍历数组数岛屿,dfs四个方向,遇到1后把周围连续的1置零,代表一个岛屿. /* 思路是:遍历二维数组,遇到1就把周围连续的1 ...

  6. HTML中,大小不确定图片的水平垂直居中

    html: css: div{ width:400px;height:300px;text-align:center;font-size:0;*font-size:200px;} div:after{ ...

  7. TIDB简介

    摘自https://pingcap.com/docs-cn/ TiDB 是 PingCAP 公司设计的开源分布式 HTAP (Hybrid Transactional and Analytical P ...

  8. webservcie学习之webservice是什么

    之前写代码,只是用到的时候才去看相关技术,用过后也没有再回头特别 去看,现在突然发现对一些技术的了解不够深刻,故现在准备再从头对用到的技术深入的学习下.就从webservice开始.首先对我不解的地方 ...

  9. Beta冲刺--总结随笔

    一.项目预期计划 时间 (天) 预期计划 完成情况 1-2 登录注册页面美化 完成 3-5 完善寻/失物登记以及管理页面 完成 6-9 实现剩下的用户管理.我的账号等页面 50% 9-10 最终测试与 ...

  10. 风炫安全web安全学习第二十九节课 CSRF防御措施

    风炫安全web安全学习第二十九节课 CSRF防御措施 CSRF防御措施 增加token验证 对关键操作增加token验证,token值必须随机,每次都不一样 关于安全的会话管理(SESSION) 不要 ...