vue学习路由嵌套
1. 路由嵌套和参数传递
传参的两种形式：
a.查询字符串：login?name=tom&pwd=123
{{$route.query}}
------
<li><router-link to="/user/login?name=wushi&pass=123">用户登录</router-link></li>
{{$route.query}}
b.rest风格url：regist/alice/456
{{$route.params}}
<li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>
{{$route.params}}
c.{{$route.path}}
获取url路径
路由实例
router.push({path:'/home'}) 添加路由，功能上与<route-link>相同
router.replace({path:'/home'}) 替换路由，不产生历史记录
完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
<router-view></router-view>
<button @click="push">添加路由</button>
<button @click="push">替换路由</button>
</div>
<template id="user">
<div>
<h1>用户信息</h1>
<ul>
<li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>
<li><router-link to="/user/login?name=wushi&pass=123">用户登录</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
</body>
<script>
var home={
template:'<h1>home</h1>'
};
var user={
template:'#user'
};
let login={
template:'<h1>登录中....{{$route.query}}</h1>'
};
let regist={
template:"<h1>注册{{$route.params}}{{$route.path}}</h1>"
}
const routes1=[
{path:'/home',component:home},
{path:'/user',component:user,
children:[
{
path: 'login',
component: login,
},
{
path:'regist/:username/:pass',
component:regist
}
]},
// {path:'*',redirect:'/home'}
];
const router = new VueRouter({
routes:routes1,
});
new Vue({
el:'#app',
router,
methods:{
push(){
router.push({path:'/home'})
}
}
})
</script>
</html>
vue学习路由嵌套的更多相关文章
- vue 多级路由嵌套后打开页面是空白
在多层路由嵌套时,一级子目录必须有一个页面并且添加一具<router-view>,否则路由跳转页面为空,没有任何显示 来自为知笔记(Wiz)
- vue.js路由嵌套
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- vue之路由嵌套,子路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js路由嵌套传参
通过配置路由时候按照: path:/user/:username/age/:age 这种就可以把参数传递 接受: $routes.params 接受到的是一个json格式的数据,
- Vue学习手记03-路由跳转与路由嵌套
1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...
- Vue学习笔记【28】——Vue路由（使用 children 属性实现路由嵌套）
使用 children 属性实现路由嵌套 <div id="app"> <router-link to="/account"> ...
- vue2.0学习笔记之路由（二）路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0学习笔记之路由（二）路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
随机推荐
- C#实现接口IHttpModule完成统一的权限验证
测试代码如下: using System; using System.Collections.Generic; using System.Text; using System.Collections; ...
- [javaEE] Servlet的手动配置
一．Servlet sun提供的一种动态web资源开发技术,本质上就是一段java小程序,可以将Sevlet加入到Servlet容器中 *Servlet容器 -- 能够运行Servlet的环境就叫做S ...
- oracle与mysql（2）
一.并发性 并发性是oltp数据库最重要的特性,但并发涉及到资源的获取.共享与锁定. mysql:mysql以表级锁为主,对资源锁定的粒度很大,如果一个session对一个表加锁时间过长,会让其他se ...
- 【Java基础】15、负数的二进制表示方法
在计算机中,负数以其正值的补码形式表达. 什么叫补码呢?这得从原码,反码说起. 原码:一个整数,按照绝对值大小转换成的二进制数,称为原码. 比如 00000000 00000000 00000000 ...
- The Maze Makers（csu1566）
1566: The Maze Makers Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 90 Solved: 33[Submit][Status][ ...
- MEF 插件式开发之 WPF 初体验
MEF 在 WPF 中的简单应用 MEF 的开发模式主要适用于插件化的业务场景中,C/S 和 B/S 中都有相应的使用场景,其中包括但不限于 ASP.NET MVC .ASP WebForms.WPF ...
- 《移山之道：VSTS软件开发指南》读书笔记
这两天看了<移山之道:VSTS软件开发指南>,对团队软件开发又有了新的认识.也许对于我们这些软件开发的新手来说,最重要的是具体技术与应用框架,但读了这本书后我感觉到,实际团队项目中工具的使 ...
- 关于 ul 嵌套 li 并且再嵌套 a 的 BUG
在写网页的过程中,总是写完了这一套,样式出了问题又去找问题废了好长时间总结一下写法以下是结构 经常会出现 li 里面与文字不在一个高度上 <div class="indicators& ...
- Python中元组相关知识
下面给大家介绍以下元组的相关知识: ·元组可以看成是一个不可更改的list 1.元组的创建 # 创建空元祖 t = () print(type(t)) # 创建只有一个值的元组 # 观察可知元组中如果 ...
- 前端开发面试题-CSS（转载）
本文由 本文的原作者markyun 收集总结. 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(conte ...