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"> ...
随机推荐
- js 模仿jquery 写个简单的小demo
<div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...
- 推荐一本写给IT项目经理的好书
原文地址:http://www.cnblogs.com/cbook/archive/2011/01/19/1939060.html (防止原文作者删除.只能拷贝一份了) 推荐一本写给IT项目经理的好书 ...
- linux 安装svn客户端
安装命令:yum install -y subversion 客户端使用命令: svn help 帮助命令 svn checkout --help 子帮助命令
- 5迪米特法则LoD
一.什么是迪米特法则 迪米特法则(Law of Demeter )又叫做最少知识 原则,也就是说,一个对象应当对其他对象尽可 能少的了解. 迪米特法则最初是用来作为面向对象的系统设 计风格的一种法则, ...
- 公开的免费WebService接口分享
天气预报Web服务,数据来源于中国气象局 Endpoint Disco WSDL IP地址来源搜索 WEB 服务(是目前最完整的IP地址数据) Endpoint Disco WSDL 随机英文 ...
- MYSQL 内存模型
- ef报错：实体类型XXX不是当前上下文的模型的一部分。
可能原因:.net框架版本与实体框架版本不匹配,比如:.net框架版本为4.5.实体框架版本为6.2. 解决方法:将实体框架版本降到6.0.
- loadrunner笔记（一）：下载、安装loadrunner和负载压力测试概念说明
(一) 下载和安装 下载:(没账号的话得先注册一个账号) https://software.microfocus.com/en-us/products/loadrunner-load-testin ...
- jsignature 中文开发手册
2017年5月9日21:23:17,最近比较忙,没时间写博客,真的是越来越懒来了 github:https://github.com/brinley/jSignature http://www.unb ...
- [httpd][daily] 查看并修改httpd的最大fd打开个数limit
重要提示: 请直接阅读步骤(6),如果不生效,再回头阅读(1)-(5). 如题: 修改这个文件就行了:/etc/security/limits.conf 查看当前配置的方法: 1. 找到httpd的p ...