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学习路由嵌套的更多相关文章

  1. vue 多级路由嵌套后打开页面是空白

    在多层路由嵌套时,一级子目录必须有一个页面并且添加一具<router-view>,否则路由跳转页面为空,没有任何显示 来自为知笔记(Wiz)

  2. vue.js路由嵌套

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  3. vue之路由嵌套,子路由

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue.js路由嵌套传参

    通过配置路由时候按照: path:/user/:username/age/:age 这种就可以把参数传递 接受: $routes.params 接受到的是一个json格式的数据,

  5. Vue学习手记03-路由跳转与路由嵌套

    1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...

  6. Vue学习笔记【28】——Vue路由(使用 children 属性实现路由嵌套)

    使用 children 属性实现路由嵌套   <div id="app">    <router-link to="/account"> ...

  7. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue2.0学习笔记之路由(二)路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

随机推荐

  1. 以前没有写笔记的习惯,现在慢慢的发现及时总结是多么的重要。 这一篇文章主要关于java多线程一些常见的疑惑点。因为讲解多线程的书籍和文章已经很多了,所以我也不好意思多说,嘻嘻嘻、大家可以去参考一些那些书籍。我这个文章主要关于实际的一些问题。同时也算是我以后复习的资料吧,。还请大家多多指教。 同时希望多结交一些技术上的朋友。谢谢。

    在java中要想实现多线程,有两种手段,一种是继续Thread类,另外一种是实现Runable接口. 以下就是我们常见的问题了: 1. 为什么我们不能直接调用run()方法呢? 我的理解是:线程的运行 ...

  2. Java的第6天,学习运算符

    提到运算符我们就会想起 加 减 乘 除: Java中的一些运算符:关系运算符.逻辑运算符.赋值运算符.和条件运算符: 其中算术运算符有:+ , - , * , \, % ,++, -- ; + , - ...

  3. nginx跳转访问

    server { listen 8888; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; ...

  4. 【RabbitMQ】2、心得总结,资料汇总

    Spring AMQP中文文档 http://ju.outofmemory.cn/entry/320538 云栖社区    https://yq.aliyun.com/search?q=rabbitm ...

  5. 分布式日志框架之ExceptionLess【二】:自行搭建帮助文档【译文】

    原文地址:https://github.com/exceptionless/Exceptionless/wiki/Self-Hosting ExceptionLess自行托管环境搭建 一.测试环境 如 ...

  6. centos7学习笔记-安装后的一些配置

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.允许普通用户使用sudo root用户下运行 visudo 在root ALL=(ALL)ALL下面添加 username ...

  7. Docker 容器备份例子

    # 在 node1 执行 nginx 程序,挂载本地的目录 docker pull nginx:stable-alpine mkdir /data/html echo "hello worl ...

  8. javascript刷新父页面的各种方法汇总

    1.用iframe.弹出子页面刷新父页面iframe <script language=JavaScript> parent.location.reload(); </script& ...

  9. VMware虚拟机安装教程详解图文

            学习Linux系统最好的方式就是在自己的虚拟机上安装Linux:接下来就给大家简单介绍一下VMware虚拟机的安装以及Linux的安装:VMware虚拟机只是为了更好的学习Linux: ...

  10. [20170909]为什么是12秒.txt

    [20170909]为什么是12秒.txt --//在开发程序时我一般会强调开发尽量不要写一些自定义函数,往往可能导致CPU忙.--//例子很像这样: CREATE OR REPLACE FUNCTI ...