路由基本使用,加动画切换
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系列之 => 路由匹配的更多相关文章

  1. 浅谈vue之动态路由匹配

    在日常开发过程中,可能会遇到一些类似于新闻详情页的内容,需要把所有详情页映射到同一组件上,这是动态路由匹配的应用场景之一.在使用的过程中,也遇到过一些小坑,此篇做个简要的总结说明: 基本使用 { pa ...

  2. Vue系列之 => 路由的嵌套

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  4. C#进阶系列——WebApi 路由机制剖析:你准备好了吗?

    前言:从MVC到WebApi,路由机制一直是伴随着这些技术的一个重要组成部分. 它可以很简单:如果你仅仅只需要会用一些简单的路由,如/Home/Index,那么你只需要配置一个默认路由就能简单搞定: ...

  5. 快速入门系列--MVC--02路由

    现在补上URL路由的学习,至于蒋老师自建的MVC小引擎和相关案例就放在论文提交后再实践咯.通过ASP.NET的路由系统,可以完成请求URL与物理文件的分离,其优点是:灵活性.可读性.SEO优化.接下来 ...

  6. vue.js之路由

    Vue.js本身只提供数据与视图绑定及组件化等功能,如果想用它来开发一个完整的SPA(单页面应用),我们就还需要使用一些Vue.js的插件.今天我学习一种叫做Vue-router的插件,用来提供路由管 ...

  7. Vue-Router动态路由匹配

    //重点在于路由出口 <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- & ...

  8. Vue系列之 => MintUI初使用

    安装 npm i mint-ui -S main.js import Vue from 'vue' // 1,导入 vue-router包 import vueRouter from 'vue-rou ...

  9. Vue系列之 => 结合webpack使用vue-router

    安装 vue-router cnpm i vue-router -S index.html <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. js 模仿jquery 写个简单的小demo

    <div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...

  2. 推荐一本写给IT项目经理的好书

    原文地址:http://www.cnblogs.com/cbook/archive/2011/01/19/1939060.html (防止原文作者删除.只能拷贝一份了) 推荐一本写给IT项目经理的好书 ...

  3. linux 安装svn客户端

    安装命令:yum install -y subversion 客户端使用命令: svn help  帮助命令 svn checkout --help  子帮助命令

  4. 5迪米特法则LoD

    一.什么是迪米特法则 迪米特法则(Law of Demeter )又叫做最少知识 原则,也就是说,一个对象应当对其他对象尽可 能少的了解. 迪米特法则最初是用来作为面向对象的系统设 计风格的一种法则, ...

  5. 公开的免费WebService接口分享

    天气预报Web服务,数据来源于中国气象局 Endpoint  Disco  WSDL IP地址来源搜索 WEB 服务(是目前最完整的IP地址数据) Endpoint  Disco  WSDL 随机英文 ...

  6. MYSQL 内存模型

  7. ef报错:实体类型XXX不是当前上下文的模型的一部分。

    可能原因:.net框架版本与实体框架版本不匹配,比如:.net框架版本为4.5.实体框架版本为6.2. 解决方法:将实体框架版本降到6.0.

  8. loadrunner笔记(一):下载、安装loadrunner和负载压力测试概念说明

    (一)   下载和安装 下载:(没账号的话得先注册一个账号) https://software.microfocus.com/en-us/products/loadrunner-load-testin ...

  9. jsignature 中文开发手册

    2017年5月9日21:23:17,最近比较忙,没时间写博客,真的是越来越懒来了 github:https://github.com/brinley/jSignature http://www.unb ...

  10. [httpd][daily] 查看并修改httpd的最大fd打开个数limit

    重要提示: 请直接阅读步骤(6),如果不生效,再回头阅读(1)-(5). 如题: 修改这个文件就行了:/etc/security/limits.conf 查看当前配置的方法: 1. 找到httpd的p ...