vue-router详解——小白速会
一、概述
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
而传统的多页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
路由中有三个基本的概念 route, routes, router。
1. route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
2. routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
3. router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？
这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
4. 客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.
二、vue-router基本用法
在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。
2.1 一个简单的单页应用
直接来看一个demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<div id="app">
<header>
<router-link class="red" to="/home">Home</router-link> //用于跳转
<router-link to="/about">About</router-link>
<!-- 增加两个到user组件的导航，展示动态路由，可以看到这里使用了不同的to属性 -->
<router-link to="/user/123">User123</router-link>
<router-link to="/user/456">User456</router-link>
</header>
<router-view></router-view> //用于被替换渲染
</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<script src="../js/demo1.js"></script>
//1.创建组件
var Home = Vue.extend({
template: '<div>' +
'<h1>Home</h1>' +
'<p>{{msg}}</p>' +
'</div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
}); var About = Vue.extend({
template: '<div>' +
'<h1>About</h1>' +
'<p>This is the tutorial about vue-router.</p>' +
'</div>'
}); var User = Vue.extend({ //展示动态路由
template: '<div>' +
'<h1>User</h1>' +
'<p>我是user组件,动态部分是{{dynamic}}</p>' +
'</div>',
computed: {
dynamic: function () {
//当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route来获取到router实例。它有一个params 属性，就是来获得这个动态部分的。
return this.$route.params.id
}
},
watch: {
//利用watch来监听$route的变化,可以进行更多的操作。to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对象。
$route: function (to, from) {
console.log(to),
console.log(from)
}
}
}); //2.创建router,并映射路由；
var router = new VueRouter({
routes: [
{
path: '/home', //映射路径
component: Home //映射组件
},
{
path: '/about',
component: About
},
{
path: '/user/:id', //配置动态的id,实现动态路由
component: User
},
{
path: '/',
redirect: '/home' // 默认重定向
}
]
}); //3.把创建好的路由挂载在根组件下面就可以了，即挂载到#app元素下面
const app = new Vue({
router
}).$mount('#app'); //4.使用标签<router-link> ,<router-link> 有一个非常重要的属性 to，定义点击之后，要到哪里去
//5.使用<router-view>标签: 在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。
2.2嵌套路由
嵌套路由，主要是由我们的页面结构所决定的。当我们进入到home页面的时候，它下面还有分类，如手机系列，平板系列，电脑系列。当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到手机的部分。
在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet, computer. Phone, tablet, compute 就相当于进入到了home的子元素。所以vue 提供了children属性，它也是一组路由,相当于我们所写的routes。
我们把上面的Demo简单修改一下：html页面不动，只是简单改一些js的部分
var Home = Vue.extend({
template: '<div>' +
'<h1>Home</h1>' +
'<p>{{msg}}</p>' +
'<p>'+
'<router-link to="/home/phone">手机 </router-link>'+ //加入子路由跳转方式
'<router-link to="/home/tablet">平板 </router-link>'+
'<router-link to="/home/computer">电脑 </router-link>'+
'</p>'+
'<router-view></router-view>'+ //在父页面的里面加入子路由页面，用于子路由页面的替换和渲染
'</div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
});
// 子路由组件
var phone = Vue.extend({
template: '<div>This is phone</div>'
});
var tablet = Vue.extend({
template: '<div>This is tablet</div>'
});
var computer = Vue.extend({
template: '<div>This is computer</div>'
});
var router = new VueRouter({
routes: [
{
path: '/home', //映射父页面路径
component: Home, //映射父组件
children: [ //利用children属性实现子路由
{
path: "phone", //映射子路由页面路径
component: phone //映射子组件
},
{
path: "tablet",
component: tablet
},
{
path: "computer",
component: computer
},
// 当进入到home时，下面的组件显示
{
path: "",
component: phone
}
]
},
{
path: '/about',
component: About
},
{
path: '/user/:id', //配置动态的id,实现动态路由
component: User
},
{
path: '/',
redirect: '/home' // 默认重定向
}
]
});
2.3命名路由
命名路由，很简单，因为根据名字就可以知道，这个路由有一个名字，那就直接给这个路由加一个name 属性，就可以了。 给user 路由加一个name 属性：
{
name: 'user',
path: '/user/:id',
component: User
},
命名路由的使用, 在router-link 中用动态的to属性就可以使用对象了
<router-link to="/user/123">User123</router-link>
<router-link :to="{name:'user',params: {id:456}}">User456</router-link>
//这两个是等价的，当使用对象作为路由的时候，to前面要加一个冒号,表示绑定
2.4跳转
vue-router 有两种跳转页面的方法
第一种是使用内置的＜router-link＞组件，它会被渲染为一个<a>标签，如：
<router-link to="/home">Home</router-link>
< router-link＞除了to还有其他的一些属性， 常用的有：
• tag
tag 可以指定渲染成什么标签，比如＜router-link to = "/about ” tag＝” li ”〉渲染的结果就是＜li >而不是＜a>。 • replace
使用replace 不会留下History 记录，所以导航后不能用后退键返回上一个页面，如<router-link to ＝”/about” replace＞。 • active-class
当＜router-link> 对应的路由匹配成功时，会自动给当前元素设置一个名为router-link-active的class，如需要修改样式，直接修改router-link-active就可以．
有时候，跳转页面可能需要在JavaScript 里进行，类似于window. location.href。这时可以用第二种跳转方法，使用router 实例的方法。
以demo中的about为例：
var About = Vue.extend({
template: '<div>' +
'<h1>About</h1>' +
'<p>This is the tutorial about vue-router.</p>' +
'<button @click="handleRouter">返回home页</button>'+ //在about页面增加一个跳转按钮
'</div>',
methods: {
handleRouter: function () {
this.$router.push('/home') //使用$router中的push方法就行路由跳转
}
}
});
$router 还有其他一些方法：
• replace
类似于＜router-link＞的replace 功能，它不会向history 添加新记录，而是替换掉当前的history 记录，如this.$router.replace （’/user/123'）； 。 • go
类似于window.history.go()，在history 记录中向前或者后退多少步，参数是整数，例如：
／／后退1 页
this.$router.go(-1) ;
／／前进2 页
this.$router.go(2);
vue-router详解——小白速会的更多相关文章
- vue计算属性详解——小白速会
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- vue内置指令详解——小白速会
指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bi ...
- vue class与style 绑定详解——小白速会
一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...
- vue表单详解——小白速会
一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的 ...
- 七. Vue Router详解
1. 认识路由 1.1 路由概念 路由是什么? 路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动 --- 维基百科 路由器提供了两种机制:路由 ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- Vue.prototype详解
参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...
- 六. Vue CLI详解
1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...
随机推荐
- Linux Vim查找字符串
一.用/和?的区别:/后跟查找的字符串.vim会显示文本中第一个出现的字符串.?后跟查找的字符串.vim会显示文本中最后一个出现的字符串.二.注意事项:不管用/还是?查找到第一个字符串后,按回车,vi ...
- 大数据 --> 大数据关键技术
大数据关键技术 大数据环境下数据来源非常丰富且数据类型多样,存储和分析挖掘的数据量庞大,对数据展现的要求较高,并且很看重数据处理的高效性和可用性. 传统数据处理方法的不足 传统的数据采集来源单一,且存 ...
- 数据库 --> MySQL使用
MySQL使用 代码: #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h>#includ ...
- Algorithm --> 二分图最大匹配
匈牙利算法 二分图:把一个图的顶点划分为两个不相交集 U 和 V ,使得每一条边都分别连接U . V 中的顶点.如果存在这样的划分,则此图为一个二分图. 匹配:在图论中,一个「匹配」(match ...
- sys用户密码丢失找回密码的步骤和命令
假设你的sys用户密码丢失,写出找回密码的步骤和命令? 1.确认哪个数据库实例的sys用户密码丢失:(例:数据库实例为orclA) 2.进入数据库实例的目录中找到PWDorclA.ora文件:(例目录 ...
- Leetcode 6——ZigZag Conversion
The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...
- C语言程序设计（基础）- 第6周作业
一.PTA作业 完成PTA第六周作业中4个题目的思路列在博客中. 1.7-1 高速公路超速处罚 2.7-2 计算油费 3.7-3 比较大小 4.7-4 两个数的简单计算器 (必须使用switch结构实 ...
- C语言程序设计（基础）- 第2周作业
1.阅读提问的智慧,要求仔细阅读链接内容,用自己的话描述你的收获,并举例子说明应该如何提问. 2.所有同学请在自己电脑上配置git.编译器(win10 系统的话就Dev-C++).翻译软件,十一回校后 ...
- jwt验证登录信息
为什么要告别session?有这样一个场景,系统的数据量达到千万级,需要几台服务器部署,当一个用户在其中一台服务器登录后,用session保存其登录信息,其他服务器怎么知道该用户登录了?(单点登录), ...
- 从一次输入框无法输入的bug，谈如何限制输入框输入类型
bug的产生和修改 上周临近周末休息的时候,一个同事跑过来了,对我说:"阿伦啊,有一个页面出问题了,火狐浏览器所有的input都没法输入了."我一听,是不是你给加了什么属性,让in ...