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"> ...
随机推荐
- Android 查看蓝牙hci日志
最近在调试android连接ble设备,需要查看hci日志.记录一下方法. 1. 开发者选项->启用蓝牙HCI信息收集日志. 2. android 8版本,默认位置/data/misc/blue ...
- docker进程分析
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/TM6zNf87MDG7Bo/article/details/80970541 序言 闷热. ...
- 查看MYSQL数据表锁定
SHOW OPEN TABLES WHERE in_use>0; #查看锁定的表SHOW PROCESSLIST; #查看对应的进程ID 找到对应的进程ID,直接KILL就行了
- LostRoutes项目日志——玩家飞机精灵Fighter解析
Fighter类的定义在Fighter.js中,Fighter类继承与PhysicsSprite. 原版的Fighter.js: var Fighter = cc.PhysicsSprite.exte ...
- jenkins git 之 Advanced clone behaviours
jenins 上的 Git Plugin插件,默认是下载完整的历史版本,随着分支约多,历史版本约多,整个文件会很大,下载常常会超时. 单独的git命令可以使用以下方式来优化 git clone --d ...
- 【漏洞复现】Tomcat CVE-2017-12615 远程代码执行漏洞
漏洞描述 [漏洞预警]Tomcat CVE-2017-12615远程代码执行漏洞/CVE-2017-12616信息泄漏 https://www.secfree.com/article-395.html ...
- map里面的set方法
let a=[1,2,3,4,1,2,3,4,1,4];let b= new Set(a);console.log(b) 还有add方法介绍下: let a=new Set();let b=[1,1, ...
- 剑指offer——python【第53题】表示数值的字符串
题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3.1 ...
- ArcPy中mapping常见函数及用法1
arcpy的mapping模块常见属性方法总结1.如何获取当前地图文档: 方式:mxd = mapping.MapDocument("CURRTENT")引用本地或者网络文档(ar ...
- python文件派生
import time class Foo: x = 1 def __init__(self, y): self.y = y def __getattr__(self, item): # 没有的情况下 ...