Vue复杂路由器的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.js"></script>
<style>
.v-link-active{
font-size: 20px;
color: #f60;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主页</a>
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
<template id="home">
<h3>我是主页</h3>
<div>
<a v-link="{path:'/home/login/zns'}">登录</a>
<a v-link="{path:'/home/reg/strive'}">注册</a>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="news">
<h3>我是新闻</h3>
<div>
<a v-link="{path:'/news/detail/001'}">新闻001</a>
<a v-link="{path:'/news/detail/002'}">新闻002</a>
</div>
<router-view></router-view>
</template>
<template id="detail">
{{$route.params | json}} //路由器的参数
<br>
{{$route.path}}//路由器的路径
<br>
{{$route.query | json}}//获取路由器传入的参数
</template>
<script>
//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
template:'#home'
});
var News=Vue.extend({
template:'#news'
});
var Detail=Vue.extend({
template:'#detail'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home,
subRoutes:{
'login/:name':{
component:{
template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
},
'news':{
component:News,
subRoutes:{
'/detail/:id':{
component:Detail
}
}
}
});
//5. 启动路由
router.start(App,'#box');
//6. 跳转
router.redirect({
'/':'home'
});
</script>
</body>
</html>
Vue复杂路由器的实现的更多相关文章
- VUE的路由器的总结
vue的路由器,我们在使用vue进行开发的时候,是必须用到的一个vue自带的组件,下面进行vue经常的操作的一些说明 1.vue-router的安装 在命令行里面使用 cnpm install vue ...
- Vue路由器的hash和history两种工作模式 && Vue项目编译部署
1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...
- Vue 全家桶
第 1 章:Vue 核心 1.1. Vue 的基本认识1.1.1. 官网1) 英文官网: https://vuejs.org/2) 中文官网: https://cn.vuejs.org/ 1.1.2. ...
- vue 快速入门 系列 —— vue-router
其他章节请看: vue 快速入门 系列 Vue Router Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌. 什么是路由 ...
- Vue系列教程（三）之vue-cli脚手架的使用
一.Vue-cli的环境准备 目的:(1)快速管理依赖 (2)确定项目结构 1.安装node.js Node.js是一个可以让前端运行在服务器上的一个工. 下载:https://nodejs.org/ ...
- Vue路由器的简单实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- Vue.js——vue-router 60分钟快速入门
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
- vue小总结
以下是我在使用vue过程中自己对vue的一些小总结,希望对学习vue的亲们能有所帮助: 1. http的post请求: this.$http({url: '/someUrl', method: ' ...
随机推荐
- SSD源码解读——数据读取
之前,对SSD的论文进行了解读,可以回顾之前的博客:https://www.cnblogs.com/dengshunge/p/11665929.html. 为了加深对SSD的理解,因此对SSD的源码进 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|（19）|多线程]
[易学易懂系列|rustlang语言|零基础|快速入门|(19)|多线程] 实用知识 多线程 我们今天来讲讲Rust中的多线程. 我直接来看看代码: use std::thread; use std: ...
- 【2019银川网络赛】L：Continuous Intervals
题目大意:给定一个长度为 N 的序列,定义连续区间 [l, r] 为:序列的一段子区间,满足 [l, r] 中的元素从小到大排序后,任意相邻两项的差值不超过1.求一共有多少个连续区间. 题解:单调栈 ...
- PyCharm控制台输出乱码
IDE Encoding设置为GBK后,在运行程序,中文就显示正常了 据说是因为ide编码不能设置为utf-8,需要设置为gdb,因为这个控制台的代码需要和windows保持一致. 另外还有一个问题就 ...
- vue 修饰符sync
从 Vue 2.3.0 起,重新引入了 .sync 修饰符,作为一个编译时的语法糖存在.它会被扩展为一个自动更新父组件属性的 v-on 监听器. 实例: 父组件:<syTree :refillD ...
- py脚本修改后自动重启
在用socket.io, pika之类启动一个脚本死循环做server或者client的时候: 1脚本被编辑之后,是不会自动重启 2当代码报错的时候,会立即退出, 只能手动重新运行 python ap ...
- Codeforces Round #578 (Div. 2) Solution
Problem A Hotelier 直接模拟即可~~ 复杂度是$O(10 \times n)$ # include<bits/stdc++.h> using namespace std; ...
- POJ3233 [C - Matrix Power Series] 矩阵乘法
解题思路 题目里要求\(\sum_{i=1}^kA^i\),我们不妨再加上一个单位矩阵,求\(\sum_{i=0}^kA^i\).然后我们发现这个式子可以写成这样的形式:\(A(A(A...)+E)+ ...
- BZOJ 2655 calc (组合计数、DP、多项式、拉格朗日插值)
题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=2655 题解 据说有一种神仙容斥做法,但我不会. 以及貌似网上大多数人的dp和我的做法都不 ...
- ubuntu开启ssh服务时，报：start:Unknown job : ssh
这里是参考网站资料,并记录下. 如图所示: 解决方法: 输入以下命令即可 /usr/sbin/sshd mkdir /var/run/sshd /usr/sbin/sshd netstat -nlt ...