刚学习vue不久,就接触了路由这个好东西。下面简单聊聊vue-router的基本用法。

一、路由的概念

  路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的news按钮,页面中就要显示news的内容。Home按钮 => home 内容, news按钮 => news内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。
点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

路由中有三个基本的概念 route, routes, router。

  1、 route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, news按钮 => news内容, 这是另一条路由。

  2、 routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { news按钮 => news内容}]

  3、 router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。

  4、客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,news中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.

  vue-router中的路由也是基于上面的内容来实现的

  在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的,我们只要把路径和组件对应起来就可以了,然后在页面中把组件渲染出来。

  5、router-view作用: router-view可以 当做是一个容器,它渲染的组件是你使用 vue-router 指定的

二、vue-router基础使用

1、下载vue和vue-router

此案例用的是vue@1.0.28vue-router@0.7.13

注意,最新版本的vue和vue-router不支持map

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-router</title>
<script src="../../node_modules/vue/dist/vue.min.js"></script>
<script src="../../node_modules/vue-router/dist/vue-router.min.js"></script> <style>
body,ul,li,a{
padding: 0;
margin: 0;
} ul{
list-style: none;
overflow: hidden;
}
a{
text-decoration: none;
} #box{
width: 600px;
margin: 100px auto; }
#box ul{
padding: 0 100px;
background-color: #2dc3e8;
} #box ul li a{
display: block;
width: 100px;
height: 50px;
background-color: #2dc3e8;
color: #fff;
float: left;
line-height:50px;
text-align: center;
}
#box ul li:hover{
background-color: #00b3ee;
} #box ul li a.v-link-active{
font-size: 18px;
background-color: #00b3ee;
} </style>
</head>
<body>
<div id="box">
<ul>
<li><a v-link="{path:'/home'}">主页</a></li>
<li><a v-link="{path: '/news'}">新闻中心</a></li>
<li><a v-link="{path: '/product'}">最新产品</a></li>
<li><a v-link="{path: '/activity'}">促销活动</a></li>
</ul> <div>
<router-view></router-view>
</div>
</div> <script>
// 1.根组件
var App = Vue.extend(); // 2.准备需要的组件
var Home = Vue.extend({
template: '<h3>我是主页</h3>'
}); var News = Vue.extend({
template: '<h3>我是新闻</h3>'
}); var Product = Vue.extend({
template: '<h3>我是产品</h3>'
}); var Activity = Vue.extend({
template: '<h3>我是促销活动</h3>'
}); // 3.准备路由
var router = new VueRouter(); // 4.关联
router.map({
'home': {
component: Home
},
'news': {
component: News
},
'product': {
component: Product
},
'activity': {
component: Activity
} }); // 5.启动路由
router.start(App, '#box');

// 6.默认跳转
router.redirect({
'/':'/home'
}); </script>
</body>
</html>

运行结果:

三 、路由嵌套

在实际开发中单路由跳转不能满足我们的需求,常常需要用到多个路由嵌套,下面是简单的路由嵌套demo.

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-router-嵌套</title>
<script src="../../node_modules/vue/dist/vue.min.js"></script>
<script src="../../node_modules/vue-router/dist/vue-router.min.js"></script> <style> body,ul,li,a{
padding: 0;
margin: 0;
} ul{
list-style: none;
overflow: hidden;
}
a{
text-decoration: none;
} #box{
width: 600px;
margin: 100px auto; }
#box ul{
padding: 0 100px;
background-color: #2dc3e8;
} #box ul li a{
display: block;
width: 100px;
height: 50px;
background-color: #2dc3e8;
color: #fff;
float: left;
line-height:50px;
text-align: center;
}
#box ul li:hover{
background-color: #00b3ee;
} #box ul li a.v-link-active{
font-size: 18px;
background-color: #00b3ee;
} </style> </head>
<body>
<div id="box">
<ul>
<li><a v-link="{path:'/home'}">主页</a></li>
<li><a v-link="{path: '/news'}">新闻中心</a></li>
</ul> <div>
<router-view></router-view>
</div>
</div> <template id="home">
<h3>我是主页</h3>
<div>
<a v-link="{path: '/home/login/lele'}">登录</a>
<a v-link="{path: '/home/register'}">注册</a>
</div>
<div>
<router-view></router-view>
</div>
</template> <template id="news">
<h3>我是新闻</h3>
<div>
<a v-link="{path: '/news/detail/001'}">新闻001</a>
<a v-link="{path: '/news/detail/002'}">新闻002</a>
</div>
<router-view></router-view>
</template> <template id="detail">
<!--当前参数-->
{{$route.params |json}}
<br>
<!--当前路径-->
{{$route.path}}
<br>
<!--当前数据-->
{{$route.query |json}}
</template> <script>
// 1.根组件
var App = Vue.extend(); // 2.准备需要的组件
var Home = Vue.extend({
template: '#home'
}); var News = Vue.extend({
template: '#news'
}); var Detail = Vue.extend({
template:'#detail'
}); // 3.准备路由
var router = new VueRouter(); // 4.关联
router.map({
'home': {
component: Home,
subRoutes:{
'login/:name': {
component:{
template: '<strong>我是登录信息{{$route.params |json}}</strong>'
}
},
'register': {
component:{
template: '<strong>我是注册信息</strong>'
}
}
}
},
'news': {
component: News,
subRoutes: {
'/detail/:id': {
component: Detail
}
}
}
}); // 5.启动路由
router.start(App, '#box'); // 6.跳转
router.redirect({
'/':'/home'
}); </script>
</body>
</html>

运行结果:

Vue-router的基本用法的更多相关文章

  1. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  2. Vue页面跳转$router.push 的用法

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon&qu ...

  3. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

  4. Vue Router的懒加载路径

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...

  5. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  6. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  7. Vue Router的导航解析过程

    在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步. 12步如下: 导航被触发. 在失活的组件里调用离开守卫beforeRouteLeave . 调用全局的 befo ...

  8. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  9. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  10. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. nodeJS-使用buffer类处理二进制数据

    使用buffer类处理二进制数据 在客户端javascript脚本代码中,对于二进制数据并没有提供一个很好的支持.然后在nodejs中需要处理像TCP流或文件流时,必须要处理二进制数据.因此在node ...

  2. Windows10 + eclipse + JDK1.8 + Apache Maven 3.6.0 + dl4j深度学习环境配置

    Windows10 + eclipse + JDK1.8 + Apache Maven 3.6.0 + dl4j深度学习环境配置 JDK下载安装请自行,并设置好环境变量1 查看Java版本C:\Use ...

  3. easyui validatebox textbox 使用例子

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormTextbox ...

  4. C++之构造函数拷贝

    拷贝构造函数,顾名思义,就是通过拷贝对象的方式创建一个新对象.拷贝构造函数有两种原型(我们继续以book类来说明拷贝构造函数原型): book(book &b); book(const boo ...

  5. tar 压缩 解压 打包命令

    01-.tar格式 解包:[*******]$ tar xvf FileName.tar 打包:[*******]$ tar cvf FileName.tar DirName(注:tar是打包,不是压 ...

  6. Ubuntu下搭建Ruby On Rails

    Ruby on Rails是一个非常高效的Web应用程序框架由David Heinemeier Hansson使用Ruby语言编写. 这是一个开源 Ruby 框架,用于开发数据库支持的Web应用程序. ...

  7. EF(EF Core)中的NotMappedAttribute(转载)

    NotMapped特性可以应用到EF实体类的属性中,Code-First默认的约定,是为所有带有get,和set属性选择器的属性创建数据列..NotManpped特性打破了这个约定,你可以使用NotM ...

  8. ME_PROCESS_PO_CUST 实现采购订单行项目增强

    用户希望创建采购订单时,输入行项目时,能根据采购订单类型,自动带出科目分类类别. 业务顾问看了一下配置,不能实现这个功能,所以用增强实现. 采购订单BADI增强:ME_PROCESS_PO_CUST. ...

  9. 前端页面loading效果(CSS实现)

    当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...

  10. C# Language Specification 5.0 (翻译)第六章 转换

    转换使表达式可以当做一个明确的类型来加以处理.转换使得所给定类型的表达式以不同类型来处理,或使得没有某个类型的表达式获得该类型.转换可以是显式或隐式的,而这决定了是否需要显式地强制转换.比方说,从类型 ...