Vue系列之 => 路由匹配
路由基本使用，加动画切换
1 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
/* 使用了router-link的组件会有一个router-link-active类 */
.router-link-active {
color: red;
font-weight: bold;
font-size: 18px;
} /* 动画类 */
.tog-enter,.tog-leave-to{
opacity: 0;
transform: translateX(150px);
}
.tog-enter-active,.tog-leave-active{
transition: all 0.6s ease;
}
</style>
<body>
<div id="app">
<!-- <a href="#/login">登录</a>
<a href="#/register">登录</a> -->
<!-- 不推荐使用#号这种方式 --> <!-- Vue-router提供了一个<router-link to="/lgin"></router-link> -->
<router-link to="/login">登录</router-link>
<!-- 默认渲染为一个a标签，通过tag可以修改 -->
<router-link to="/register" tag="span">注册</router-link>
<!-- 这是由vue-router提供的元素，用来当作占位符的，路由规则匹配到的组件就会展示到这个router-view中 -->
<!-- 使用router-view 提供一个展示的容器 -->
<transition name="tog" mode="out-in">
<router-view></router-view>
</transition>
</div>
<template id="tmp">
<div>
<h1>我是模板一的内容，登录</h1>
</div>
</template>
<template id="tmp1">
<div>
<h1>我是模板二的内容，注册</h1>
</div>
</template>
<script> var login = {
template : '#tmp'
}
var register = {
template : '#tmp1'
} var routerObj = new VueRouter({
// route //这个配置对象中的router表示路由匹配规则的意思
routes : [ //路由匹配规则
// 每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
// 属性1是path , 表示监听哪个路由链接地址
// 属性2是component ， 表示如果路由前面匹配到的path,则展示component属性对应的组件
// component的属性值，必须是一个模板对象，不能是一个组件名称。
{ path : '/' , redirect : '/login'}, //这是的redirect和node中的redirect不一样。
{ path : '/login' , component : login},
{ path : '/register' , component : register},
],
// 自定义激活的类名称
linkActiveClass : 'myactive'
}) var vm = new Vue({
el : '#app',
data : {},
methods: { },
// 将路由规则对象注册到vm实例上用来监听url地址变化 ，然后展示对应组件。
router : routerObj
})
</script>
</body>
</html>
路由规则中传参数
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<style>
a:focus,a:hover{
color: red;
}
.myactive {
color: red;
font-size: 26px;
font-weight: bold;
}
.toa-enter,.toa-leave-to{
opacity: 0;
transform: translateX(100px);
}
.toa-enter-active,.toa-leave-active{
transition: all 0.6s ease;
}
</style> <body>
<div id="app">
<!-- 在路由中，传id=10的参数 -->
<router-link to="/login?id=10&name=test">登录一下</router-link>
<router-link to="/register?id=10">注册一下</router-link> <transition name="toa" mode="out-in">
<router-view>注册一下</router-view>
</transition>
</div> <template id="tmp1">
<div>
登录一下{{ $route.query.id }} + {{ $route.query.name }}
</div>
</template>
<template id="tmp2">
<div>
注册两下
</div>
</template>
<script>
var login = {
template: '#tmp1',
data(){
return {
msg : '123'
}
},
created(){ //组件的生命周期钩子函数
//this指当前组件，当前组件下有个$route
console.log(this.$route.query.id);
}
}; var register = {
template: '#tmp2'
}; //创建路由对象
var routerObj = new VueRouter({
routes: [
{
path : '/',
redirect : '/login'
},
{
path: '/login',
component: login
},
{
path: '/register',
component: register
},
],
linkActiveClass : 'myactive'
})
var vm = new Vue({
el: '#app',
data: {},
methods: { },
router: routerObj })
</script>
</body> </html>
使用params传参数
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<style>
a:focus,a:hover{
color: red;
}
.myactive {
color: red;
font-size: 26px;
font-weight: bold;
}
.toa-enter,.toa-leave-to{
opacity: 0;
transform: translateX(100px);
}
.toa-enter-active,.toa-leave-active{
transition: all 0.6s ease;
}
</style> <body>
<div id="app">
<!-- 在路由中，传id=10的参数 -->
<router-link to="/login/12/alln">登录一下</router-link>
<router-link to="/register">注册一下</router-link> <transition name="toa" mode="out-in">
<router-view>注册一下</router-view>
</transition>
</div> <template id="tmp1">
<div>
登录一下
</div>
</template>
<template id="tmp2">
<div>
注册两下
</div>
</template>
<script>
var login = {
template: '#tmp1',
data(){
return {
msg : '123'
}
},
created(){ //组件的生命周期钩子函数
//this指当前组件，当前组件下有个$route
console.log(this.$route.params.id);
console.log(this.$route.params.name);
}
}; var register = {
template: '#tmp2'
}; //创建路由对象
var routerObj = new VueRouter({
routes: [
{
path : '/',
redirect : '/login'
},
{
path: '/login/:id/:name',
component: login
},
{
path: '/register',
component: register
},
],
linkActiveClass : 'myactive'
})
var vm = new Vue({
el: '#app',
data: {},
methods: { },
router: routerObj })
</script>
</body> </html>
Vue系列之 => 路由匹配的更多相关文章
- 浅谈vue之动态路由匹配
在日常开发过程中,可能会遇到一些类似于新闻详情页的内容,需要把所有详情页映射到同一组件上,这是动态路由匹配的应用场景之一.在使用的过程中,也遇到过一些小坑,此篇做个简要的总结说明: 基本使用 { pa ...
- Vue系列之 => 路由的嵌套
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- C#进阶系列——WebApi 路由机制剖析：你准备好了吗？
前言:从MVC到WebApi,路由机制一直是伴随着这些技术的一个重要组成部分. 它可以很简单:如果你仅仅只需要会用一些简单的路由,如/Home/Index,那么你只需要配置一个默认路由就能简单搞定: ...
- 快速入门系列--MVC--02路由
现在补上URL路由的学习,至于蒋老师自建的MVC小引擎和相关案例就放在论文提交后再实践咯.通过ASP.NET的路由系统,可以完成请求URL与物理文件的分离,其优点是:灵活性.可读性.SEO优化.接下来 ...
- vue.js之路由
Vue.js本身只提供数据与视图绑定及组件化等功能,如果想用它来开发一个完整的SPA(单页面应用),我们就还需要使用一些Vue.js的插件.今天我学习一种叫做Vue-router的插件,用来提供路由管 ...
- Vue-Router动态路由匹配
//重点在于路由出口 <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- & ...
- Vue系列之 => MintUI初使用
安装 npm i mint-ui -S main.js import Vue from 'vue' // 1,导入 vue-router包 import vueRouter from 'vue-rou ...
- Vue系列之 => 结合webpack使用vue-router
安装 vue-router cnpm i vue-router -S index.html <!DOCTYPE html> <html lang="en"> ...
随机推荐
- Variational RL for POMDP
1.Le, Tuan Anh, et al. "Auto-encoding sequential monte carlo." arXiv preprint arXiv:1705.1 ...
- 遍历一个Set的方法只有一个：迭代器（interator）。
Set-HashSet实现类: 遍历一个Set的方法只有一个:迭代器(interator). HashSet中元素是无序的(这个无序指的是数据的添加顺序和后来的排列顺序不同),而且元素不可重复. 在O ...
- supervisor来自动化部署，集成git
使用此方法基本上在测试环境可以用来代替jenkens构建docker了,部署速度上快很多倍. 写一个脚本拉取git,可以使用git包,也可以直接调用linux或者wndows的 命令来拉取git. 然 ...
- 自己动手为Spark 2.x添加ALTER TABLE ADD COLUMNS语法支持
SparkSQL从2.0开始已经不再支持ALTER TABLE table_name ADD COLUMNS (col_name data_type [COMMENT col_comment], .. ...
- 禅道迁移(windows_to_linux)
需求分析 随着禅道数据的增加,原来通过虚拟机提供的mysql服务器相应速度跟不上需求.且原来禅道的前端与数据库分离安装在windows与linux中,现在提供实体服务器,需要将禅道环境迁移. 确认环境 ...
- linux的shadow文件
在<Python绝技>这本书的第一个小程序首先展示了针对与unix系统中shadow文件密码的暴力破解的能力,因为之前只是对shadow文件停留在保存了用户密码的阶段,但并没有详细研究,所 ...
- Java课程课堂测试05
大致要求:将十道计算题输出至TXT文件,再读取文件至控制台,然后在控制台中输入答案并评判对错 我在大致的要求当中已经将我的设计思路体现了出来 首先,实现计算题的设计,第二步要对计算题循环,将答案存到一 ...
- mybatis06--动态sql
1.if标签 public interface StudentDao { /** *动态sql的查询 参数是Student对象 不确定 用户输入几个属性值 */ List<Student> ...
- Oracle数据库实例的启动及关闭
要启动和关闭数据库,必须要以具有Oracle 管理员权限的用户登陆,通常也就是以具有SYSDBA权限的用户登陆.一般我们常用SYS用户以SYSDBA连接来启动和关闭数据库.下面介绍Oracle数据库几 ...
- 前端 jquery获取当前页面的URL信息
以前在做网站的时候,经常会遇到当前页的分类高亮显示,以便让用户了解当前处于哪个页面.之前一直是在每个不同页面写方法.工程量大,也不便于修改.一直在想有什么简便的方法实现.后来在网上查到可以用获取当前U ...