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"> ...
随机推荐
- IDEA自动生成序列化ID
1.安装 serialVersionUID 插件: 2.设置你的IDEA为检查序列化ID 3.重启IDEA(有的版本可以不重启) 4.在需要自动生成序列化ID的类中使用快捷键:Alt+Insert 转 ...
- tensorflow冻结变量方法（tensorflow freeze variable）
最近由于项目需要,要对tensorflow构造的模型中部分变量冻结,然后继续训练,因此研究了一下tf中冻结变量的方法,目前找到三种,各有优缺点,记录如下: 1.名词解释 冻结变量,指的是在训练模型时, ...
- 一、Sql Server 基础培训《进度1-建库建数据表（实际操作）》
知识点: 1.建数据库示例参考 --创建一个数据库名为‘dbtest’ create database dbtest go --打开数据库 dbtest use dbtest go 2.建表示例参考 ...
- 手把手JDK环境变量配置
分为下载,配置,验证三个步骤解释如何进行JDK环境变量配置. 步骤一: 首先查看配置成功后的效果: tip:点击win——>运行(或者使用win+r,或者shift+鼠标右键打开powershe ...
- ruby离线安装整理
参考官方文档: https://rvm.io/rvm/offline 参考博客:https://blog.csdn.net/topswim/article/details/79260369 一.前提 ...
- python全栈开发 * 32知识点汇总 * 180717
32 网络编程 (一)一.架构 定义:程序员开发的一种模式. 分类: C/S 架构 C/S即:Client与Server , 客户端/ 服务器模式 . 缺点 : 冗余 B/S 架构 Browser与S ...
- Prime Flip AtCoder - 2689
发现我们每次区间取反,相邻位置的正反关系只有两个位置发生改变 我们定义bi为ai和ai-1的正反关系,即ai=ai-1时bi=0,否则bi=1,每次取反l~r,b[l]和b[r+1]会发生改变 容易发 ...
- 如何将PDF文件转Word，有什么方法
PDF文件怎样转换成Word呢?在现在的日常办公中PDF文件和Word文件都是办公必不可少的两种文件格式了.那么当我们在工作中需要对这两种文件进行转换时,我们应该怎样实现呢?下面我们就一起来看一下吧. ...
- ping不通，配置dns
vim /etc/resolv.conf nameserver 119.29.29.29 nameserver 182.254.116.116 nameserver 8.8.8.8
- AngularJS实现可伸缩的页面切换
AngularJS实现可伸缩的页面切换 AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我 ...