Vue(day4)
这里说的Vue中的路由是指前端路由,与后端路由有所区别。我们可以使用url来获取服务器的资源,而这种url与资源的映射关系就是我们所说的路由。对于单页面程序来说,我们使用url时常常通过hash
的方法切换页面,即我们常用的锚点。比如:
<a href="#here">click me</a> /*跳转到对应的锚点*/
<!-- ... -->
<div id="here">you find me</div> /*设置锚点*/
而请求路径中的hash不会传到后端,所以常常被用作前端切换页面的方法,即在同一服务器资源下对页面进行切换。
下面分别从Node和Vue中使用路由,来感受具体的区别。
一、使用Node中的路由:express自带ruoter
先看一下需要完成的效果:
当我们点击页面上的Home和About按钮是会跳转到对应的服务器资源页面。
首先安装必要的模块,创建文件目录结构和前端资源文件。
# 初始化目录
npm init -y
# 安装需要的模块
npm install express art-template express-art-template
其他资源页面可以在参考这里(可直接下载运行)
二、使用Vue中的路由:VueRouter
我们使用官方路由来创建一个简单的单页面应用:
1、VueRouter的简单入门
首先我们需要安装Vue.js和VueRouter.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
html代码
<div id="app">
<p>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</p>
<router-view></router-view>
</div>
router-link
是VueRouter
提供的组件,默认会创建一个a
标签,并将to
属性的值作为hash
值最为该链接的地址。router-view
也是VueRouter
提供的组件,用来显示路由对应的模板。js代码
//1、创建路由视图组件:包含了模板信息
var home = {template: '<h3>This is home page!</h3>'};
var about = {template: '<h3>This is about page!</h3>'};
//2、创建路由规则(路由的映射关系):是一个对象数组,相当于路由映射关系表
var routes = [
{path: '/home', component: home},
{path: '/about', component: about}
];
//3、创建一个路由实例
var router = new VueRouter({
routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
el: '#app',
router: router
});
2、router-link
<router-link>
组件支持用户在具有路由功能的应用中 (点击) 导航。
通过 to
属性指定目标地址,默认渲染成带有正确链接的 <a>
标签,可以通过配置 tag
属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。
to
(String|Location, required)to
属性规定了链接跳转的路径,所以是必须的,可以是字符串,也可以是表示路径位置的对象。<!--将会渲染为:/home-->
<router-link to="home">link</router-link> <!--也可以动态绑定-->
<router-link :to="'home'"></router-link> <!--动态绑定时便可以传入对象,以下渲染为:/home?useid=123 -->
<router-link :to="{path: 'home', query: {useid: '123'}}"></router-link>
replace
默认为false,当设置该属性后路由不会执行
router.push()
,而是执行router.replace()
,这样浏览器的history将不会产生导航记录。<router-link to="home" replace></router-link>
append
如果设置了该属性,则连接会变成相对链接。比如从
/a
处点击了连接为/b
的来链接,则访问的地址将变为/a/b
。tag
指定导航链接渲染的标签,默认为
a
标签。渲染为其他标签后任然会监听点击事件,具有导航效果。active-class
设置链接激活后使用的css类名,默认值为
router-link-active
,设置后默认值任然存在。默认值可通过路由构造选项linkActiveClass
进行配置。exact
"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。举个例子,如果当前的路径是
/a
开头的,那么<router-link to="/a">
也会被设置 CSS 类名。event
(String | Array< String >)设置激活导航的事件。默认为
clcik
。exact-active-calss
配置当链接被精确匹配的时候应该激活的 class。默认值
router-link-exact-active
,该默认值也是可以通过路由构造函数选项linkExactActiveClass
进行全局配置的。
3、router-view
<router-view>
组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view>
渲染的组件还可以内嵌自己的 <router-view>
,根据嵌套路径,渲染嵌套组件。
4、路由构建选项
在创建路由是可传入的参数,上面的实例中我们传入了路由规则信息的routes
,此外还有其他参数。
routes
(Array < routeConfig >)routes
是包含路由映射关系的数组,数组的每一项都包含了一条路由映射信息。routeConfig
可以包含一些信息:declare type routeConfig = {
path: string, //路径
component: componentObj,//视图组件
name: string,//命名路由
components: {[name: string]: componentObj},//命名视图组件
redirect: string | Location | Function,
props: boolean | Object | Function,
alias: string | Array<string>,
children: Array<RouteConfig>, // 嵌套路由
beforeEnter: (to: Route, from: Route, next: Function) => void,
meta: any, // 2.6.0+
caseSensitive: boolean,// 匹配规则是否大小写敏感?(默认值:false)
pathToRegexpOptions: Object// 编译正则的选项
}
mode
最开始说到的前端路由和后端路由的差别,我们可以使用
mode
来配置路由的模式,有以下三种模式:hash
:浏览器模式,会在链接前加上"#"最为俩链接,支持所有浏览器。history
:依赖 HTML5 History API 和服务器配置。abstract
:支持所有 JavaScript 运行环境,如 Node.js 服务器端。
base
设置路由的基路径,默认为"/"。
linkActiveClass
linkExactActiveClass
此外还有一些其他可供选择的项,这里不再一一赘述。更多细节请参考:Vue-router官方文档
5、路由实例属性
router.app
:配置了该路由的Vue根实例。router.mode
:路由的模式。router.currentRute
:当前路由对应的路由信息对象。
6、 路由对象
一个路由对象 (route object) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的路由记录 (route records)。
路由对象是不可变 (immutable) 的,每次成功的导航后都会产生一个新的对象。
路由对象可以出现在多个地方,自如组件内:this.$route
。(注意是$route
而不是$router
,前者是路由对象,后者是路由实例)。
路由对象有以下属性:
- $route.path:当前导航路径。
- $route.params:一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。
- $route.query:一个 key/value 对象,表示 URL 查询参数。
- $route.hash:当前路由的 hash 值 (带
#
) ,如果没有 hash 值,则为空字符串。 - $route.fullPath:完成解析后的 URL,包含查询参数和 hash 的完整路径。
- $route.matched:一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是
routes
配置数组中的对象副本 (还有在children
数组)。 - $route.name:当前路由的名称,如果有的话。
- $route.redirectedFrom:如果存在重定向,即为重定向来源的路由的名字。
更多细节请参考:Vue-router官方文档
7、一些简单的例子
#路由对象的使用
<p>
<!--注意:这里如果没有 / 就会变成append模式 ,即在当前连接下添加连接-->
<router-link to="/query?id='123'&name='jinx'">Query</router-link>
<router-link to="/params/456/yasuo">Params</router-link>
</p>
<router-view></router-view>
//1、创建路由视图组件:在模版中掉用路由对象
var query = {template: '<h3>this is query: id=<em>{{$route.query.id}}</em>&name=<em>{{$route.query.name}}</em></h3>'};
var params = {template: '<h3>This is params: id=<em>{{$route.params.id}}</em>, name=<em>{{$route.params.name}}</em></h3>'};
//2、创建路由规则
var routes = [
{path: '/query', component: query},
{path: '/params/:id/:name', component: params}
];
//3、创建一个路由实例
var router = new VueRouter({
routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
el: '#app',
router: router
});
#路由嵌套
<div id="app">
<!--路由-->
<router-link to="/">Home</router-link>
<router-link to="/account">Account</router-link>
<router-view></router-view>
<!--模板-->
<script type="text/template" id="account-template">
<div>
<h3>用户操作界面</h3>
<!--子路由-->
<router-link to="/account/login">login</router-link>
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>
</script>
</div>
//1、创建路由视图组件
var home = {template: '<h3>home page</h3>'};
var account = {template: '#account-template'};//可以导入模板(这里使用template标签的使用有bug不知道什么原因)
var login = {template: '<h3>登陆</h3>'};
var register = {template: '<h3>注册</h3>'};
//2、创建路由规则
var routes = [
{path: '/', component: home},
{path: '/account',
component: account,
children: [
{path: '/account/login', component: login},
{path: '/account/register', component: register}
]
},
];
//3、创建一个路由实例
var router = new VueRouter({
routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
el: '#app',
router: router
});
可以尝试一下如果子路由也写在外部routes
的效果(当写在外部就会共用router-view
标签)。关于模板需要注意的是,可以使用类似script
这样的标签来包裹模板,然后根据id进行引用即可,另外,模板只能有一个根元素。关于模板标签的使用可以参考这篇文章:HTML5 template 标签元素简介
#命名视图组件
目前我们都只是用了一个router-view
标签,如果我们需要使用多个,那我们就需要对组件进行命名,否则无法找到要渲染的位置。注意,使用的是conponents
而非component
。
比如下面的例子:
<div id="app">
<!--对路由视图进行命名-->
<router-view></router-view>
<div style="display: flex;height: 800px;">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
//1、创建路由视图组件
var header = {template: '<div class="header">header</div>'};
var left = {template: '<div class="left">left</div>'};
var main = {template: '<div class="main">main</div>'};
//2、创建路由规则
var routes = [
{path: '/',
components: {
default: header,
left: left,
main: main
}//命名视图组件
}];
//3、创建一个路由实例
var router = new VueRouter({
routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
el: '#app',
router: router
});
再添加一下样式:
body{
margin: 0px;
padding: 0px;
}
.header{
background-color: #6aa4d2;
height: 100px;
}
.left{
background-color: #999ddd;
flex: 2;
}
.main{
background-color: #b6b985;
flex: 8;
}
就可以看到以下布局效果:
Vue(day4)的更多相关文章
- vue day4 table
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Vue.js - Day4
父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm ...
- Vue入门到精通
Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- Asp.net MVC + Redis(hash入库+log4net集成)
博客四元素 既然要写一个博客类的网站,那就应该知道博客的相关信息. 标题 作者 时间 内容 title author time content 因为之前有了解过Redis,所以有点纠结于数据的存储方式 ...
- 2101: Bake Off
Description Davy decided to start a weekend market stall where he sells his famous cakes. For the fi ...
- JavaScript设计模式 Item 2 -- 接口的实现
1.接口概述 1.什么是接口? 接口是提供了一种用以说明一个对象应该具有哪些方法的手段.尽管它可以表明这些方法的语义,但它并不规定这些方法应该如何实现. 2. 接口之利 促进代码的重用. 接口可以告诉 ...
- jQuery学习之旅 Item2 选择器【二】
这里接着上一个Item1 把jQuery的选择器讲完.主要有:属性过滤器和子元素过滤器 点击"名称"会跳转到此方法的jQuery官方说明文档. 5. 属性过滤器 Attribute ...
- easyui下载包详解
easyui包详解: 文件夹: demo--该目录下存放的是 EasyUI PC 版各插件的示例示例.如果不想在官网上查看演示,可以在该目录下找到相应的演示示例 demo-mobile--该目录下存放 ...
- Spring-cloud (九) Hystrix请求合并的使用
前言: 承接上一篇文章,两文本来可以一起写的,但是发现RestTemplate使用普通的调用返回包装类型会出现一些问题,也正是这个问题,两文没有合成一文,本文篇幅不会太长,会说一下使用和适应的场景. ...
- mysql千万级大数据SQL查询优化
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- IP地址、端口、TCP协议、UDP协议
最近在看<疯狂java讲义>,第17章网络编程里提到IP地址.端口.TCP协议.UDP协议这几个概念.以前上课时学过,现在重温了一遍.在这里,用自己的语言简单的讲解一下吧. IP地址:每一 ...
- 【功耗测试环境预置自动化脚本开发】【切换wifi模式为siso模式】【用到方法*args】
import os,reimport logginglogging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s[ ...
- go语言调度器源代码情景分析之六:go汇编语言
go语言runtime(包括调度器)源代码中有部分代码是用汇编语言编写的,不过这些汇编代码并非针对特定体系结构的汇编代码,而是go语言引入的一种伪汇编,它同样也需要经过汇编器转换成机器指令才能被CPU ...