vue.js路由vue-router（一）——简单路由基础
前言
vue.js除了拥有组件开发体系之外，还有自己的路由vue-router。在没有使用路由之前，我们页面的跳转要么是后台进行管控，要么是用a标签写链接。使用vue-router后，我们可以自己定义组件路由之间的跳转，还可以设置稍复杂的嵌套路由，创建真正的spa（单页面应用）。我之前用vue-cli脚手架写了一个简单的人员管理实例，现在我们不用脚手架，就用原生的vue来写，本文也主要是通过实例来讲解vue.js+vue-router相关知识。
简单路由跳转实例
1.起步
下载vue-router.js，新建项目文件夹命名为router，将下载的vue-router.js放在router/js/路径下。新建index.html作为主页，引入样式文件，引入两个关键的js，vue和vue-router，再在body标签底部引入一个main.js用来写vue实例及配置路由，注意引用顺序。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href="css/main.css"> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> </head> <body> <div id="app"></div> <template></template> //组件区域 <script src="js/main.js"></script> </body> </html>
2.定义路由视图
调用foot-nav组件，将底部导航组件引入在这里，是因为两个路由页面都要用到它
<div id="app"> <router-view></router-view> <foot-nav></foot-nav> </div>
知识点:：<router-view>
<router-view>标签相当于一个插槽，用于将匹配到的组件渲染出来，一个个路由定义的组件相当于卡，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示。
一个组件可以有多个<router-view>视图，并用name值去区分它们，这种多用在网页布局方面，如上左主结构，这个时候就可以定义三个<router-view>
示例
<div id="app">
<router-view name="top"></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
<script>
var topCom = Vue.extend({
template: '<div>顶部</div>'
})
var leftCom = Vue.extend({
template: '<div>侧边栏</div>'
})
var mainCom = Vue.extend({
template: '<div>主页</div>'
})
var router = new VueRouter({
routes:[
{
path: '/',
name: 'home',
components:{
top: topCom,
left: leftCom,
main: mainCom
}
}
]
})
var app = new Vue({
el: '#app',
router
})
</script>
再为各个板块设置一下样式，打开浏览器查看效果
3.子组件（底部导航）
3.1 创建子组件
人员管理系统分为两个模块，一个首页，一个管理页，两个页面都需引入一个公共组件：底部导航。在首页index.html中加入以下模板
<template id="footer">
<div class="footer fixed">
<ul>
<li><router-link to="/">首页</router-link></li>
<li><router-link :to="{name:'manage',params:{id:1}}">人员管理</router-link></li>
</ul>
</div>
</template>
知识点:：<router-link>
<router-link>标签主要实现跳转链接功能，属性to='/'即是跳转到path为'/'的路径（我们等会得配置路径为'/'和'/manage'的路由）
router-link除了可以跳转链接之外，还可以传参，可以传多个参数，一般格式为
<router-link to="路由路径"></router-link><router-link :to="{ path:路由路径}"></router-link><router-link :to="{name:'路由命名',params:{参数名:参数值,参数名:参数值}}"></router-link>知识点：this.$router.push
如果不想用<router-link>标签，也可以给需要跳转的地方添加一个点击事件，在事件里写this.$router.push方法
this.$router.push('路由路径')this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})3.2 注册子组件
在main.js中全局注册子组件并且定义vue实例
Vue.component('foot-nav',{
template: '#footer'
})
var app = new Vue({
el: '#app'
})
4.首页及管理页组件
4.1 创建首页及管理页
<template id="index">
<div>
首页
</div>
</template>
<template id="manage">
<div>
人员管理
<p>id:{{id}}</p>
</div>
</template>
4.2 注册主页及管理页
var Home = Vue.extend({
template: '#index'
})
var Manage = Vue.extend({
template: '#manage',
data(){
return{
id: ''
}
},
mounted:function(){
this.id = this.$route.params.id
}
})
知识点：this.$route.params
this.$route指向vue实例的路由对象，params是路由传过来的参数集合
5.定义路由
定义路由router，并引进vue实例中
var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'/manage/:id',
name: 'manage',
component:Manage
}
]
})
var app = new Vue({
el: '#app',
router
})
知识点：path:'/路径/:参数名'
一个路由要传参时，需在path路径后面添加一个‘/’并加上冒号和参数名
知识点：路由激活class
vue-router当路由处于激活状态时，会有一个class类“router-link-active”，我们只需为这个类添加样式就可以实现路由激活状态下的样式编写
接下来去浏览器查看路由跳转效果
6.嵌套路由
有时我们项目由多层嵌套组件组成，这个时候就需要用到嵌套路由
先看下图例子，我们给manage路由再添加两个子路由
6.1 在组件内部添加<router-view>
<template id="manage"> <div> 人员管理 <ul> <li><router-link to="/manage/list">人员列表</router-link></li> <li><router-link to="/manage/edit">编辑</router-link></li> </ul> <router-view></router-view> </div> </template>
6.2 定义子路由
//构建组件
var List = Vue.extend({
template: '<div>人员列表</div>'
})
var Edit = Vue.extend({
template: '<div>编辑</div>'
})
var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'/manage',
name: 'manage',
component:Manage,
//子路由由children表示
children:[
{
path:'list',
name: 'list',
component:List
},
{
path:'edit',
name: 'edit',
component:Edit
}
]
}
]
})
7.路由重定向
未设置路由重定向时，当我们随意输入一个路径，会显示一片空白或404。为了防止这种现象发生，我们一般在配置路由时再定义一个重定向路由
var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'*',
redirect: '/'
},
]
})
打开浏览器，随意输入一个未定义的路由查看效果
vue.js路由vue-router（一）——简单路由基础的更多相关文章
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- vue路由--使用router.push进行路由跳转
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 route-link是在html中静态定 ...
- Vue.js中，如何自己维护路由跳转记录？
在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...
- Vue.js 第4章 组件与路由
组件 什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式 一个组件中一般可以设置:结构,功能和样式 为什么要使用组件: 使用方便 复用 组件的创建和使用 组件的 ...
- vue.js几行实现的简单的todo list
序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...
- vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
- 搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
随机推荐
- 【BZOJ 1059】[ZJOI2007]矩阵游戏
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最后要求对于所有的i,a[i][i]=1 那么,如果第i行的第j列为1. 就说明我们可以把这个第i行换到第j行. 因为这样的话,a[ ...
- Docker学习总结（11）——八个Docker的真实应用场景
[编者的话]Flux 7介绍了常用的8个Docker的真实使用场景,分别是简化配置.代码流水线管理.提高开发效率.隔离应用.整合服务器.调试能力.多租户环境.快速部署.我们一直在谈Docker,Doc ...
- uva 10474 Where is the Marble?（简单题）
我非常奇怪为什么要把它归类到回溯上,明明就是简单排序,查找就OK了.wa了两次,我还非常不解的怀疑了为什么会 wa,原来是我居然把要找的数字也排序了,当时仅仅是想着能快一点查找.所以就给他排序了,没考 ...
- java操作文件的创建、删除、遍历
java操作文件的创建.删除.遍历: package test; import java.io.File; import java.io.IOException; import java.util.A ...
- 瞎折腾-CentOS 7.4 编译4.16.2版kernel 并安装
CentOS 7.4下 原内核版本: 3.10.0-693.el7.x86_64 改后内核版本: 4.16.2 系统版本: CentOS-7-x86_64-Minimal-1708.iso 运行环境: ...
- [TJOI2013]单词 AC 自动机
题目描述: 小张最近在忙毕设,所以一直在读论文. 一篇论文是由许多单词组成但小张发现一个单词会在论文中出现很多次,他想知道每个单词分别在论文中出现了多少次. 题解: AC 自动机裸题,将所有字符串读入 ...
- linux 常用文本操作相关命令
平时工作经常会对文本进行相关操作,包括读写.替换.统计等等,借此整理和学习一下有关命令. 1. cat 查看文件中的内容, -n 查看时为每一行加编号; -b 和-n类似,只不过对于空白行不编号: 2 ...
- [USACO12MAR]摩天大楼里的奶牛（状态压缩DP）
题意 给出n个物品,体积为w[i],现把其分成若干组,要求每组总体积<=W,问最小分组.(n<=18) 题解 一看以为是弱智题.(可能真的是,我太菜了) 然后跟walthou夸下海口:这么 ...
- windows平台Perl模块离线安装
工具: Perl windows工具:ActivePerl-5.24.0.2400-MSWin32-x86-64int-300560.exe Dmake工具:https://cpan.metacpan ...
- ifsta---统计网络接口活动状态
ifstat命令就像iostat/vmstat描述其它的系统状况一样,是一个统计网络接口活动状态的工具.ifstat工具系统中并不默认安装,需要自己下载源码包,重新编译安装,使用过程相对比较简单. 下 ...