07：vue定义路由
1.1 定义路由
1、说明
1. 路由是单页面应用程序（SPA）的关键，Vue提供过来路由插件，使用这个路由就要安装这个插件
2. 安装： npm install vue-router
3. 依赖于vue文件，所有要优先引入vue
4. 引入路由之后，我们就可以基于组件+路由实现单页面应用程序开发
5. 路由使用官网: https://router.vuejs.org/zh-cn/
2、路由作用
1. 定义组件分成三步：1 定义组件容器元素， 2 定义组件类， 3 注册组件
2. 当使用路由的时候，这三步就抽象成一步，我们只需要定义一个组件类参数对象即可
3. 所以使用路由，让我们定义组件变得简单了，这里的组件对象，只能被路由使用
3、使用路由分成以下三步
1. 第一步 定义路由规则
1. var routes = [{}, {}]，每一个参数代表一个路由对象
2. path定义规则；name定义路由名称；component 表示路由的组件：这里使用组件对象
2. 第二步 实例化路由对象
1. 实例化时候，我们要添加路由规则
3. 第三步 在vue实例化对象中，注册路由
1. 第一件事 注册路由
2. 第二件事 定义路由渲染的容器（在模板中） router-view，渲染的时候，router-view会自动删除
注：在访问的url后面加上 #/home、#/detail、#/list 就会显示对应的组件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Home = {
template:'<h1>home</h1>'
};
var List = {
template:'<h1>list {{msg}}</h1>',
data:function () {
return {
msg: 'hello'
}
}
};
var Detail = {
template:'<h1>detail</h1>',
}; // 第一步：定义路由规则
var routes = [
{
path:'/home',
name:'home',
component:Home
},
{
path:'/list',
name:'list',
component:List
},
{
path:'/detail',
name:'detail',
component:Detail
},
]; // 第二步：实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步：在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
路由基本使用
1.2 路由参数
1、路由参数说明
1. 一个 ‘’/” 将路由切割成一个一个模块，这些模块默认都是静态路由
2. 静态路由是不能变的，一个规则对应一个路径
3. 动态路由：一个规则对应多个路径
4. 例如 /page/:pageNum
匹配： /page/10, /page/100, /page/hello
不匹配： /list/10, /page/10/abc
2、路由参数使用范围
1. 动态的路由参数是可以捕获的，并且在任何组件中（vue实例化对象），都可以捕获或
2. 每一个组件实例化对象，都添加了一个$route的参数， 定义在组件实例化对象的原型上。
3. 通过params属性，即可获取动态路由参数 $route.params.id （在控制台可以这样获取：app.$route）
4. 通过query属性，获取query参数 $route.query.word （在控制台可以这样获取： app.$route.query）
注：这种定义放法 在url后面加上 #/detail不会访问组件，只有像这样 #/detail/20?word=hello 才可以访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Detail = {
template:'<h1>detail --- {{$route.params.id}}---{{$route.query.word}}</h1>',
}; // 第一步：定义路由规则
var routes = [
{
// 多个商品对应一个页面
path:'/detail/:id',
name:'detail',
component:Detail
}
]; // 第二步：实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步：在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
路由参数
1.3 嵌套路由
1、嵌套路由说明
1. 路由可以嵌套定义。也就是说路由中可以定义其子路由
2. 分成两步：
第一步 在路由的模板中，定义router-view元素，定义渲染的容器
第二步 在路由对象中添加children属性，属性值是数组，
2、嵌套路由举例
1. 如果路径后加上 #/home 仅显示home页面组件
2. 如果路径加上 #/home/search 会同时显示home组价和子组件 search组件中内容
3. 由于 page子路由中写的是绝对路径 '/page' 所以访问路径变成 #/page 而不用加上父路径home，显示home组件和page组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <template id="home">
<div>
<h1>home</h1>
<router-view></router-view> <!--第一步：定义子路由渲染的容器-->
</div>
</template> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Home = {
template:'#home',
// 添加子路由
};
var Page = {
template: '<h2>page</h2>'
}; // 第一步：定义路由规则
var routes = [
{
path:'/home',
name:'home',
component:Home,
children:[
{path:'/page',component:Page}, // 如果子路由的路径是绝对路径，结果就是该绝对路径
{path:'search',component:{template:'<h2>search</h2>'}}, // 如果子路由的路径是相对路径，结果就是父路径+子路径
]
}
]; // 第二步：实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步：在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
嵌套路由
1.4 路由重定向
1、说明
1. 我们可以定义路由对象的path属性是*,此时会匹配所有的路径，
2. 然后再定义redirect可以将路由重定向到某个路由，实现默认路由的定义
注意：由于*匹配的广，因此定义在最后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Home = {
template:'<h1>home</h1>'
};
var List = {
template:'<h1>list {{msg}}</h1>',
data:function () {
return {
msg: 'hello'
}
}
};
var Detail = {
template:'<h1>detail</h1>',
}; // 第一步：定义路由规则
var routes = [
{
path:'/home',
name:'home',
component:Home
},
{
path:'/list',
name:'list',
component:List
},
{
path:'/detail',
name:'detail',
component:Detail
},
{
path:'*',
redirect:'/home' // 重定向
}
]; // 第二步：实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步：在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
路由重定向
1.5 路由导航：router-link
1、router-link 标签用法
1. Vue-router提供了router-link标签元素，可以定义标签导航
2. 本质上我们可以通过a标签的href来实现指向，但是router-link功能更强大
3. 标签中可以使用下面三个常用属性：
1）to指向路径，注意：加上:(v-bind:) 可以使用变量
2）v-text设置内容，还可以将内容直接写在标签内
3）tag：定义标签的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<a href="#/list">列表页</a>-->
<!--<a href="#/detail">详情页</a>-->
<router-link :to="'/list'" v-text="'列表页01'" tag="span"></router-link>
<router-link :to="'/detail'" v-text="'详情页01'"></router-link>
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Home = {
template:'<h1>home</h1>'
};
var List = {
template:'<h1>list {{msg}}</h1>',
data:function () {
return {
msg: 'hello'
}
}
};
var Detail = {
template:'<h1>detail</h1>',
}; // 第一步：定义路由规则
var routes = [
{
path:'/home',
name:'home',
component:Home
},
{
path:'/list',
name:'list',
component:List
},
{
path:'/detail',
name:'detail',
component:Detail
},
]; // 第二步：实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步：在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
路由导航
07：vue定义路由的更多相关文章
- vue嵌套路由-query传递参数（三）
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
- vue简单路由（二）
在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html ...
- vue简单路由（一）
在项目中,将vue的单页面应用程序改为了多页面应用程序,因此在某些场景下,需要频繁的切换两个页面,因此考虑使用路由,这样会减少服务器请求. 使用vue-cli(vue脚手架)快速搭建一个项目的模板(w ...
- Bug记载2之Vue.JS路由定义的位置
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- VUE进阶(路由等)
初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-dire ...
- vue（5）—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue嵌套路由--params传递参数
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue.js路由vue-router
学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...
随机推荐
- Photoshop去图片水印——适用复杂图片上有水印
该方法适合复杂图片上有水印的,不过这个只适合水印只是文字而没有背景的那种.不是所有的水印图片都适合处理.下面是处理前后的对照 工具/原料 photoshop8.0 方法/步骤 1 打开需要 ...
- centos7挂载新加4T硬盘到/home目录
以下操作均在root环境下运行. 1.查看硬盘 # fdisk -l 发现硬盘为/dev/sdb 大小4T 2.如果此硬盘以前有过分区,则先对磁盘格式化: # mkfs -t ext4 /dev/sd ...
- (转)Xcode导航快捷键（大全）
Xcode导航快捷键1.工程导航器:Command+1快速浏览代码.图片以及用户界面文件. 2.显示/隐藏导航器面板:Command+0当你在对屏幕进行截图的时候可能会想要隐藏起与你感兴趣内容的无关的 ...
- 实时计算DStream下求平均值（reduceByKey or combineByKey）
对NC市的卡口数据进行分析,大概所有卡口每15秒接入的有效数据在3000条左右,现在产品经理要求对这些数据进行拥堵分析,通过两个卡口之间的车辆行驶时长来判断道路的拥堵情况.具体算法不展开.其中我需要做 ...
- Nginx的介绍和安装详解
[介绍+安装]Nginx的介绍和安装详解 == 介绍和安装 == Nginx是一个自由.开源.高性能及轻量级的HTTP服务器及反转代理服务器, 其性能与IMAP/POP3代理服务器相当.Nginx ...
- 【Spring学习笔记-MVC】Spring MVC之多文件上传 (zhan)
http://www.cnblogs.com/ssslinppp/p/4607330.html (zhan)
- tp命名空间
namespace Home\Controller; 命名空间 根命名空间下的类所在的文件夹use Think\Controller; 使用 根命名空间下的controller类 顶头写 ...
- sudo安装某一文件报错：E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/dpkg/)，是否有其他进程正占用它？
报错原因:资源被占用 解决方法: sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock
- jQuery选择器--#id、element和.class
#id 描述 根据给定的ID匹配一个元素.使用任何的元字符作为名称的文本部分, 它必须被两个反斜杠转义:\\ 参数 id 用于搜索的,通过元素的 id 属性中给定的值 element 概述 根 ...
- Teacher Bo (时间复杂度 + 暴力)
如果你仔细看就会发现有一个数据很重要那就是点的范围,那么这样一来最多只有2 * maxn的不同曼哈顿距离了,这样一看只要暴力一下就可以过了. #include<bits/stdc++.h> ...