Vue.js 相关知识（路由）
1. 简介
路由，工作原理与路由器相似（路由器将网线总线的IP分发到每一台设备上），Vue中的路由根据用户在网页中的点击，将其引导到对应的页面。
2. 使用步骤
安装vue-router或者直接引入vue-router.js（下载地址：https://router.vuejs.org/）
例：SPA页面（Single Page Application，将一个网站的所有页面写在一个文件，通过不同的div进行区分，再通过div的显示、隐藏实现跳转效果）
- 定义组件对象（页面）、组件模板、注册组件
- 定义router-link、router-view
- router-link：组件会被解析为a标签
- router-view：路由显示的内容会在 router-view 中显示
- 定义路由规则
- 注册到根组件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 4. 定义router-link、router-view -->
<div>
<router-link to='/home'>首页</router-link>
<router-link to='/setting'>设置</router-link>
<router-view></router-view>
</div>
</div>
<!-- 2. 定义组件模板 -->
<template id="home">
<div>
<h3>首页页面</h3>
</div>
</template>
<template id="setting">
<div>
<h3>设置页面</h3>
</div>
</template>
<script type="text/javascript">
//1. 定义组件对象
let Home = {template:'#home'}
let Setting = {template:'#setting'}
//5. 定义路由规则
let route = new VueRouter({
routes:[
{
path:'/home',
component:Home
},
{
path:'/setting',
component:Setting
}
]
})
let app = new Vue({
el:"#app",
//3. 注册到根组件中
components:{
Home,
Setting
},
//6. 注册到根组件中
router:route
})
</script>
</body>
</html>
3. 嵌套路由
实际开发时，一个页面常会嵌套多个组件（页面），如：设置页面中包括个人设置、系统设置等
- 定义组件对象、组件模板、注册组件
- 定义router-link、router-view
- 嵌套的路由，router-link、router-view 定义在嵌套的地方
- 定义路由规则
- 嵌套的路由，通过 children 属性定义
<div id="app">
<!-- 4. 定义router-link、router-view -->
<div>
<router-link to='/home'>首页</router-link>
<router-link to='/setting'>设置</router-link>
<router-view></router-view>
</div>
</div>
<!-- 2. 定义组件模板 -->
<template id="home">
<div>
<h3>首页页面</h3>
</div>
</template>
<template id="setting">
<div>
<h3>设置页面</h3>
<router-link to="/setting/user">个人设置</router-link>
<router-link to="/setting/system">系统设置</router-link>
<router-view></router-view>
</div>
</template>
<template id="user">
<div>
<h3>个人设置页面</h3>
</div>
</template>
<template id="system">
<div>
<h3>系统设置页面</h3>
</div>
</template>
<script type="text/javascript">
//1. 定义组件对象
let Home = {template:'#home'}
let Setting = {template:'#setting'}
let User = {template:'#user'}
let System = {template:'#system'}
//5. 定义路由规则
let route = new VueRouter({
routes:[
{
path:'/home',
component:Home
},
{
path:'/setting',
component:Setting,
children:[
{
path:'/setting/user',
component:User
},
{
path:'/setting/system',
component:System
}
]
}
]
})
let app = new Vue({
el:"#app",
//3. 注册到根组件中
components:{
Home,
Setting,
User,
System
},
//6. 注册到根组件中
router:route
})
</script>
4. 动态路由
同一个路由地址，根据传递的不同参数，显示不同的内容，如：商品详情页，多个商品共用一个页面（带有动态参数）
- 定义路由规则时，将动态参数使用 :变量 进行参数绑定
<div id="app">
<!-- 4. 定义router-link、router-view -->
<div>
<router-link to='/detail/1'>手机1</router-link>
<router-link to='/detail/2'>手机2</router-link>
<router-view></router-view>
</div>
</div>
<!-- 2. 定义组件模板 -->
<template id="detail">
<div>
<h3>商品详情页</h3>
<p>商品id是：{{this.$route.params.id}}</p>
</div>
</template>
<script type="text/javascript">
//1. 定义组件对象
let Detail = {template:'#detail'}
//5. 定义路由规则
let route = new VueRouter({
routes:[
{
//说明：该处为动态参数，通过this.$route.params.id获取
path:'/detail/:id',
component:Detail
}
]
})
let app = new Vue({
el:"#app",
//3. 注册到根组件中
components:{
Detail
},
//6. 注册到根组件中
router:route
})
</script>
5. 编程式路由
编程式路由，通过js代码实现页面跳转，类似 js 代码 window.location 实现页面跳转
<div id="app">
<div>
<button @click="show">查看手机2商品详情</button><br>
<router-link to='/detail/1'>手机1</router-link>
<router-link to='/detail/2'>手机2</router-link>
<router-view></router-view>
</div>
</div>
<template id="detail">
<div>
<h3>商品详情页</h3>
<p>商品id是：{{this.$route.params.id}}</p>
</div>
</template>
<script type="text/javascript">
let Detail = {template:'#detail'}
let route = new VueRouter({
routes:[
{
path:'/detail/:id',
component:Detail
}
]
})
let app = new Vue({
el:"#app",
components:{
Detail
},
router:route,
methods:{
show(){
this.$router.push({path:'/detail/2'})
}
}
})
</script>
6. 路由重定向
重定向，当访问一个路由地址时，自动跳转至其他的路由地址
例：当打开路由页面时，不显示任何内容（默认无匹配的路由规则）
修改代码（在routes中添加红色部分的内容）
routes:[
{
path:'/home',
component:Home
},
{
path:'/',
redirect:'/home',
component:Home
},
{……}
]
直接打开当前页面时，自动跳转到/home页面（重定向）
Vue.js 相关知识（路由）的更多相关文章
- Vue.js相关知识3-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js相关知识4-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js相关知识2-组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js相关知识1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 相关知识（动画）
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
- Vue.js 相关知识（组件）
1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...
- Vue.js 相关知识（基础）
1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪 注:学习 vue.js 时,一定要抛弃 jQuery 的 ...
- Vue.js 相关知识（脚手架）
1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤 安装npm 或 cnpm n ...
- vue.js基础知识篇(2):指令详解
第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...
随机推荐
- HDFS NameNode内存详解
前言 <HDFS NameNode内存全景>中,我们从NameNode内部数据结构的视角,对它的内存全景及几个关键数据结构进行了简单解读,并结合实际场景介绍了NameNode可能遇到的问题 ...
- 探索C#字符串
一.前言 刚接触C#时,书上说string是一种特殊的引用类型,因此string类型变量在作为参数传递到另一个方法,被修改后原变量的值不会发生变化,当时看得我一脸懵逼,什么叫特殊....后来又听说字符 ...
- Linux基础第二课——系统架构
网址 192.168.0. 172.16. 10.0. 以上是内网网段 127.0.0.1 这是本地回环网卡 表示本身 查看网络是否连通 windows Linux 都是通过 ping 先ping网关 ...
- Android (争取做到)最全的底部导航栏实现方法
本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 还有一些个人感觉不完全切题的方法也会简单介绍一下. 方法一. ViewPager + List<View> ...
- [luogu2172] 部落战争
题面 我们可以将'.'抽象为一个可以通过的点, 将'x'抽象为一个不可通过的点. 那么题意便可以转化为: 一条路径可以看做从任意一个没有到达过的可通过的点出发到任意一个其他的可以通过却没有被到 ...
- docker中使用的镜像加速器可以自己生成
只要你到该网址https://cr.console.aliyun.com/cn-hangzhou/mirrors登录(我使用的是支付宝帐号),然后你如下图操作,就能够看见你的加速器地址了,只要你登录就 ...
- Scrapy 框架（二）数据的持久化
scrapy数据的持久化(将数据保存到数据库) 一.建立项目 1.scrapy startproject dushu 2.进入项目 cd dushu 执行:scrapy genspider -t cr ...
- 理解JavaScript中的作用域链
理解了作用域链,闭包就不难理解了,所以本文主要谈一谈我对作用域链的理解. 关于JavaScript中变量的作用域,全局变量在程序中始终都有定义.局部变量在声明它的函数体内以及其内部所嵌套的函数内始 ...
- P2176 [USACO14FEB]路障Roadblock
题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一定长度.FJ 的房子在 1 号田,牛棚在 N 号田.没有两块田被多条道路连接,以适当的路 ...
- VS一些快捷键
参考网址:http://www.open-open.com/lib/view/open1412261028453.html (这里省去了很多大家闭上眼都会操作的什么Ctrl+S 等等操作 给出的大多是 ...