vue2.0路由写法、传参和嵌套
前置知识请戳这里
vue-routerCDN地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
vue-router下载地址：https://github.com/vuejs/vue-router/tree/dev/dist
vue2.0路由基本写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!--组件的显示占位域-->
<router-view></router-view>
</div> <script>
//1.0 准备组件
var App = Vue.extend({}); var login = Vue.extend({
template: '<div><h3>登录</h3></div>'
}); var register = Vue.extend({
template: '<div><h3>注册</h3></div>'
}) //2.0 实例化路由规则对象
var router = new VueRouter({
routes: [{
path: '/login',
component: login
},
{
path: '/register',
component: register
},
{
path:'/',
//当路径为/时，重定向到/login
redirect:'/login'
}
]
}); //3.0 开启路由对象
new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>
vue2.0路由传参
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register/value">注册</router-link>
<!--组件的显示占位域-->
<router-view></router-view>
</div> <script>
//1.0 准备组件
var App = Vue.extend({}); var login = Vue.extend({
template: '<div><h3>登录</h3></div>'
}); var register = Vue.extend({
template: '<div><h3>注册{{name}}</h3></div>',
data:function(){
return {
name:''
}
},
created:function(){
this.name = this.$route.params.name;
}
}); //2.0 实例化路由规则对象
var router = new VueRouter({
routes: [{
path: '/login',
component: login
},
{
path: '/register/:name',
component: register
},
{
path:'/',
//当路径为/时，重定向到/login
redirect:'/login'
}
]
}); //3.0 开启路由对象
new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>
vue2.0路由嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<!--组件的显示占位域-->
<router-view></router-view>
</div> <script>
//1.0 准备组件
var App = Vue.extend({}); var account = Vue.extend({
template: '<div><h1>账号组件</h1><router-view></router-view></div>'
}); var login = Vue.extend({
template: '<div><h3>登录</h3></div>'
}); var register = Vue.extend({
template: '<div><h3>注册</h3></div>'
}); //2.0 实例化路由规则对象
var router = new VueRouter({
routes: [{
path: '/account',
component: account,
children: [{
path: 'login',
component: login
},
{
path: 'register',
component: register
}
]
}]
}); //3.0 开启路由对象
new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>
vue2.0路由写法、传参和嵌套的更多相关文章
- Vue学习之路由vue-router传参及嵌套小结（十）
一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue2.0路由写法
// 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件. // 可以从其他文件 import 进来 var Fo ...
- VueJs(11)---vue-router（命名路由，命名视图，重定向别名，路由组件传参）
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- Vue-admin工作整理（四）：路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
- vue2.0路由
现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...
- vue2.0路由-路由嵌套
vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...
- vue2.0路由变化1
路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...
- vue2.0路由进阶
一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...
- vue-router路由动态传参query和params的区别
1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...
随机推荐
- BFS - 20190206
1.二叉树 BFS 2.拓扑排序 重点 BFS 3.棋盘上的宽搜 BFS 图的遍历 层级遍历,由点及面,拓扑排序,简单图的最短路径 如果题目问最短路径:可能是BFS或者DP, 最长路径:DFS q ...
- python自动化day3-函数、递归、内置函数
一.什么是函数 修理工===>程序员 具备某一功能的工具===>函数 要想使用工具,需要事先准备好,然后拿来就用且可以重复使用要想用函数,需要先定义,再使用 二.函数基础 1.函数分类 # ...
- linux vi文本编辑器三种模式切换及常用操作
初学者刚进入vi不要乱点键盘,vi的三种模式和各种命令很容易弄混@@ vi编辑器是Unix系统最初的编辑器.它使用控制台图形模式来模拟文本编辑窗口,允许查看文件中的行.在文件中移动.插入.编辑和替换文 ...
- Git修改文件
如果我们修改了本地的某个文件但是没有提交,这时我们用 $ git status可以看到提示,例如我在readme2.txt里面新加了一行,然后查看状态: git status命令可以让我们时刻掌握仓库 ...
- Longest palindrome subsequence
A palindrome is a nonempty string over some alphabet that reads the same forwardand backward. Exampl ...
- 【OpenCV-Python】-颜色空间转换
OpenCV官方教程中文版 for Python,原文为段立辉翻译,感谢Linux公社www.linuxidc.com此文档为自学转述,如有侵权请联系本人 使用工具Python3.6使用包cv2,nu ...
- sql server 保留小数，向上保留指定位数的小数，仅记录，勿看。
比如 4.05 要取成 4.1 , 4.16 取成 4.2 ,4.5 取成 4.5 ,意思就是小数部分第二位不管是多少都丢掉然后加0.1,但是如果是 4.5 这样完整的就不需要处理. 可以像下面这么写 ...
- 判断弹出框存在（alert_is_ present）
系统弹窗这个是很常见的场景,有时候它不弹出来去操作的话,会抛异常.那么又不知道它啥时候会出来,那么久需要去判断弹窗是否弹出了 判断 alert 源码分析 class alert_is_present( ...
- iOS设备的屏幕分辨率
全部列在这里吧.方便自己方便别人.保持更新…… iPhone: iPhone 1G320x480 iPhone 3G320x480 iPhone 3GS320x480 iPhone 4640x960 ...
- 冀永楠：OCR的应用锦集及背后技术
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云加社区技术沙龙 发表于云+社区专栏 演讲嘉宾:冀永楠,现为腾讯云大数据AI产品中心高级研究员.负责了腾讯云与华星光电等多个图像AI项 ...