一、锚点的概念

案例:百度百科

特点:单页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

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

4、编写html

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

5、编写js

<script>
// 1. 定义(路由)组件。
// 复杂的组件也可以从独立的vue文件中引入
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' } // 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
] // 3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
}) // 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
new Vue({
el: '#app',
router
}) // 现在,应用已经启动了!
</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. SQL:我为什么慢你心里没数吗?

    SQL 语句执行慢的原因是面试中经常会被问到的,对于服务端开发来说也是必须要关注的问题. 在生产环境中,SQL 执行慢是很严重的事件.那么如何定位慢 SQL.慢的原因及如何防患于未然.接下来带着这些问 ...

  2. 服务器安装PVE6.1.2

    1     去官网下载PVE的镜像文件 https://www.proxmox.com/en/downloads 2     制作成U盘启动 准备一个U盘用来制作启动盘(记得将U盘里原来的资料备份然后 ...

  3. 服务器挂掉导致需要对k8s新增节点

    [导读]今日是周六,本想午休起来之后写篇有关kubernetes service的文章,没想到两台虚拟机接连挂掉,所以又重新创建了两台虚拟机.新建时又一直黑屏,所以只能克隆. 由于虚拟机是新建的,所以 ...

  4. springboot实现mybaitis逆向工程

    springboot实现mybaitis逆向工程 首先引入依赖,一共需要两个依赖(一个是mybaits依赖,一个是mybatis逆向工程插件) <dependency> <group ...

  5. 加班申请单flowable中

    /* * Copyright (c) 2018-2028, Chill Zhuang All rights reserved. * * Redistribution and use in source ...

  6. Linux嵌入式学习-交叉编译mplayer

    http://bbs.gkong.com/archive.aspx?ID=286721

  7. stm32学习笔记之SysTick的思考

    原文来自--SevenZ的笔记.http://blog.21ic.com/user1/8247/archives/2011/85920.html ? 首先我们要明白什么是SysTick定时器? Sys ...

  8. CSS解析

    CSS(层叠样式表) CSS层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  9. 今天写了一个SSM小项目,运行之后,前端页面的CSS、js样式显示不出来,具体操作如下:

    因为SSM中我们设置了拦截器,拦截器会拦截CSS和JS,所有样式渲染不出来,在Web.xml中写上 1 <servlet-mapping> 2 <servlet-name>de ...

  10. HDFS中大数据常见运维指令总结

    一.查看HDFS下的参数信息 [root@master ~]# hdfs Usage: hdfs [--config confdir] COMMAND where COMMAND is one of: ...