什么是路由?

即通过互联网把信息从源地址传输到目的地址的活动

路由决定数据包从来源到目的地的路径

转送将输入端的数据转移到合适的输出端

后端路由:

早起网站开发全部由服务器渲染,例如

Java的JSP,.NET的ASP,PHP

服务器直接生产渲染好的HTML页面,返回给客户端展示

一个网站非常多的页面,服务器如何处理?
每个页面都有自己对应的网路地址URL:

Url会发送到服务器,服务器根据URL进行匹配,并且交给一个Controller进行处理

控制器处理之后最终生成数据或者页面,返回给前端

好处:

有利于SEO优化

缺点:

整个页面开发,由后端程序员编写和维护
前端人员开发页面必须掌握后端语言才可以开发
逻辑和数据混杂一起,维护困难

前端路由:

Ajax使得数据的传输不再需要服务器编写服务器页面,后端只提供API(地址)传输数据

前端使用Ajax接收数据:再使用JavaScript渲染数据

优点:

职责明确,后端专注逻辑与数据,前端专注于渲染,可视化,用户体验
移动端出现后,后端不需要任何处理,继续使用之前的API即可
前后端是一个趋势

【Vue - Router】

Vue开发属于前后端分离的单页面应用,由前端来维护路由

通过改变url而页面不进行整体的刷新

目前流行的前端三大框架:都由自己的路由实现:

Angular : ngRouter
React : reactRouter
Vue : vue-router

vue-Router是vue官方提供的路由插件,和vue本身深度集成

适用于单页面构建:

vue-Router单页应用,页面的切换,即组件的切换:

【安装vue-router】

新建一个项目

vue create 项目目录名称

npm install vue-router --save

1、导入路由对象,调用Vue.use(VueRouter)

2、创建路由实例,传入路由映射配置

3、在Vue中挂载创建的路由实例

创建router目录和index.js

index.js编写:

import Vue from 'vue';
import VueRouter from "vue-router"; // 导入路由插件 Vue.use(VueRouter); //注入路由插件
const routes = []; // 定义路由
const router = new VueRouter({ // 创建路由实例
routes
});
export default router; // 导出路由实例

在main.js引入路由:

import Vue from 'vue'
import App from './App.vue'
import router from "./router"; // ./router/index.js 因为是index.js,可以默认不写
Vue.config.productionTip = false new Vue({
render: h => h(App),
router
}).$mount('#app')

删除HelloWorld.vue

在App.vue取消组件:

<template>
<div id="app">
</div>
</template> <script>
// import HelloWorld from './components/HelloWorld.vue' export default {
name: 'App',
}
</script> <style lang="stylus">
#app
font-family Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
text-align center
color #2c3e50
margin-top 60px
</style>

创建一个首页组件和一个样本组件

<template>
<div>
<h2>这是首页组件</h2>
<p>这是首页的内容</p>
</div>
</template> <script>
export default {
name: "home"
}
</script> <style scoped> </style>

样本:

<template>
<div>
<h2>样本的标题</h2>
<p>样本的标签</p>
</div>
</template> <script>
export default {
name: "sample"
}
</script> <style scoped> </style>

【使用vue-router】

使用步骤:

1、创建路由组件:

2、配置路由映射,将路由和组件进行关联

3、使用路由

配置路由(index.js):

import Vue from 'vue';
import VueRouter from "vue-router"; // 导入路由插件 // 导入路由组件
import home from "../components/home";
import sample from "../components/sample"
; Vue.use(VueRouter); //注入路由插件 const routes = [ // 定义路由
{ path : '/home', component : home },
{ path : '/sample'
, component : sample }
]; const router = new VueRouter({ // 创建路由实例
routes
}); export default router; // 导出路由实例

两个必要的组件:

router-link : 设置路由跳转
router-view : 显示当前路由组件

使用组件(App.vue):

<template>
<div id="app">
<h2>这是App.vue组件的标题</h2>
<router-link to="/home"> 首页 </router-link>
<br>
<router-link to="/sample"> 样本 </router-link> <router-view></router-view>

</div>
</template> <script> export default {
name: 'App'
}
</script> <style lang="stylus">
#app
font-family Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
text-align center
color #2c3e50
margin-top 60px
</style>

启动项目,访问页面:

当点击样本时:

【Router设置首页默认路径】

import Vue from 'vue';
import VueRouter from "vue-router"; // 导入路由插件 import home from "../components/home";
import sample from "../components/sample"; Vue.use(VueRouter); //注入路由插件
const routes = [
{ path : '/', redirect : home },
{ path : '/home', component : home },
{ path : '/sample', component : sample }
]; // 定义路由
const router = new VueRouter({ // 创建路由实例
routes
});
export default router; // 导出路由实例

访问/重定向到home

默认情况,路径的改变使用的是URL的hash,如果我们希望使用的是H5的History模式,

可以进行如下配置:

import Vue from 'vue';
import VueRouter from "vue-router"; // 导入路由插件 import home from "../components/home";
import sample from "../components/sample"; Vue.use(VueRouter); //注入路由插件
const routes = [
{ path : '/', redirect : home },
{ path : '/home', component : home },
{ path : '/sample', component : sample }
]; // 定义路由
const router = new VueRouter({ // 创建路由实例
routes,
mode : 'history'
});
export default router; // 导出路由实例

【Router-Link再补充】

to属性就是a标签的href属性,值是具体的访问地址

其他属性:

tag
指定router-link会被渲染成什么标签,默认a标签
例如:
<router-link to="/sample" tag="li> 样本 </router-link> active-class
被点击后自动给当前元素设置一个router-link-active的class
作用是改变激活状态下的显示

【Vue】11 VueRouter Part1 概述 & 入门的更多相关文章

  1. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  2. Vue.js + Webpack + ECMAScript 6 入门教程

    Vue.js学习教程 1.Vue.js——60分钟快速入门 2.Vue.js——60分钟组件快速入门(上篇) 3.Vue.js——60分钟组件快速入门(下篇) 4.Vue.js——基于$.ajax实现 ...

  3. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  4. 【07】 vue 之 Vue-router

    注意: vue-router@2.x 只适用于 Vue 2.x 版本. vue-router@1.x 对应于Vue1.x版本. 的Github地址:vue-router 文档地址 7.2. vue-r ...

  5. webpack 配置 Vue 多页应用 —— 从入门到放弃

    webpack 配置 Vue 多页应用 -- 从入门到放弃 一直以来,前端享有无需配置,一个浏览器足矣的优势,直到一大堆构建工具的出现,其中 webpack 就是其中最复杂的一个,因此出现了一个新兴职 ...

  6. 基于Vue+Vuex+Vue-Router+axios+mint-ui的移动端电商项目

    第一步:安装Node 1.打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题. 下载地址:https://nodejs.org/e ...

  7. 我的音乐盒子(nodejs7 + koa2 + vue + vuex + vue-router)

    你们知道的,nodejs对jser来说,是个好东西,快快的,自从接触nodejs后,总想弄点东西. 这弄个啥了,一天打开百度音乐盒,哟,自己弄一个如何了,好啊好啊. 后台: nodejs 7 + ko ...

  8. use vue vuex vue-router, not use webpack

    vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...

  9. [ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统

    好久没写文字了,当然大家也不期待嘛,反正看代码就行了. 演示网站 首先说下这个项目吧. 如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架. 我们先来看看首页吧 ...

  10. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

随机推荐

  1. SQL server查看触发器是否被禁用

    1 select a.name as 触发器名,b.name as 表名, 2 case a.is_disabled when 0 then '启用' when 1 then '禁用' else '未 ...

  2. centos7 添加极点五笔

    打开终端,输入: yum install ibus ibus-table-wubi 遇到"Is this OK",输入y回车. 完成后重启电脑. 打开"应用程序" ...

  3. JavaScript执行模型笔记

    JavaScript执行模型 引言 JavaScript是一个单线程(Single-threaded)异步(Asynchronous)非阻塞(Non-blocking)并发(Concurrent)语言 ...

  4. Vue学习:8.v标签综合-强化版

    通过前几节的认识和学习,我们掌握了常用v标签的用法,这一节再来巩固提高一下吧. 实例:成绩面板 实现功能: 主体由两大部分组成:表格+表单.这个表格可以显示多科成绩,并具有表头.删除以及底部统计功能. ...

  5. Jenkins发布服务报错Fatal error: put encountered an exception while uploading磁盘空间不足处理 No space left on device

    Jenkins发布服务报错Fatal error: put encountered an exception while uploading磁盘空间不足处理 No space left on devi ...

  6. -bash: curl: command not found 卸载后重新安装

    -bash: curl: command not found rpm -e --nodeps curl yum remove curl rpm -qa|grep curl yum -y install ...

  7. Windows无法调节亮度

    原因1:驱动问题 解决方式: 安装360驱动大师,一键安装. 也可以使用其他软件:如驱动精灵. 推荐使用电脑品牌本身的驱动软件:如联想:联想驱动管理 原因2:设备管理问题 解决方式: 计算机 -> ...

  8. 【译】VisualStudio.Extensibility 17.10:用 Diagnostics Explorer 调试您的扩展

    想象一下,创建的扩展比以往任何时候都运行得更快.更流畅!如果您最近还没有跟上,我们一直在努力改进 VisualStudio. Extensibility SDK.VisualStudio. Exten ...

  9. Swoole v6 能否让 PHP 再次伟大?

    大家好,我是码农先森. 现状 传统的 PHP-FPM 也是多进程模型的的运行方式,但每个进程只能处理完当前请求,才能接收下一个请求.而且对于 PHP 脚本来说,只是接收请求和响应请求,并不参与网络通信 ...

  10. vba--将excel单元格格式改为常规格式

    Sub 改格式() ActiveWorkbook.activesheet.Select For Each Rng In ActiveSheet.UsedRange With Rng .NumberFo ...