手动访问和传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/翠花">翠花</router-link>
        <router-link to="/user/王老五">王老五</router-link>
        <button @click="surf">点击漫游信息</button>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
<script src="../../lib/vue.js"></script>
<script src="../../lib/vue-router.js"></script>
<script src="js/main.js"></script>
</body>
</html>
var routes = [
    {
        path: "/",
        component: {
            template: `
            <div>首页</div>
            `
        }
    },
    {
        path: "/about",
        component: {
            template: `
            <div>关于我们</div>
            `
        }
    },
    {
        path: "/user/:name",
        name:"user",
        component: {
            template: `
            <div>
            <div>我叫:{{$route.params.name}}</div>
            <router-link to="more" append>更多信息</router-link>             <!--append更加智能的写法,直接在父级路由添加-->
            <router-view></router-view>
</div>
            `
        },
        children: [
            {
                path: "more",
                component: {
                    template: `
                    <div>
                    用户:{{$route.params.name}}的详细信息
                    xxxxxxxxxxxxxxxx
</div>
                    `
                }
            }
        ]
    }
];

var router = new VueRouter({
    routes: routes
});
new Vue({
    el: "#app",
    router: router,
    methods: {
        surf: function () {
            setTimeout(function () {
                this.router.push("/about");
                setTimeout(function () {
                    this.router.push({name:"user",params:{name:"翠花"}})
                //    这样传参,设置好定时器,自动跳转
                }, 2000)
            }, 2000)
        }
    }
})

原文地址:https://www.cnblogs.com/52-qq/p/8387589.html

时间: 2024-10-02 10:56:21

手动访问和传参的相关文章

winform访问url传参有返回值

using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Net;using System.Text;using System.Threading.Tasks; namespace ConsoleApplication1{ class Program { static void Main(string[] args) { HttpWebRequest request =

angularjs访问后台传参方式

第一种方式,参数放到post请求中 createTask : function(fileName,beginDate,endDate) { var url = 'financialExportToEBS/createTask'; var deferred = $q.defer(); var promise = $http.post(url,{"fileName":fileName, "beginDate":beginDate,"endDate":

python爬虫---scrapy框架爬取图片,scrapy手动发送请求,发送post请求,提升爬取效率,请求传参(meta),五大核心组件,中间件

# settings 配置 UA USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36' 一丶scrapy的图片数据爬取(流数据的爬取) ? scrapy中封装好了一个管道类(ImagesPipeline),基于该管道类可以实现图片资源的请求和持久化存储 编码流程: 爬虫文件中解析出图片的地址 将

枚举|标志枚举+|(或)和&amp;(与)运算|类型转换|值类型和引用类型|传参|异常|垃圾回收

枚举部分 enum 关键字用于声明枚举,即一种由一组称为枚举数列表的命名常量组成的独特类型. 通常情况下,最好是在命名空间内直接定义枚举,以便该命名空间中的所有类都能够同样方便地访问它. 但是,还可以将枚举嵌套在类或结构中.默认情况下,第一个枚举数的值为 0,后面每个枚举数的值依次递增 1. 例1: //此枚举的默认值是从0开始 enum Days {Sat, Sun, Mon, Tue, Wed, Thu, Fri}; 例2: //此枚举的默认值是从1开始,下标为3的tue值为7,从下标3开始

学习笔记:JavaScript传参方式———ECMAScript中所有函数的参数都是按值传递

我们把命名参数(arguments)视为局部变量,在向参数传递基本类型值时,如同基本类型变量的复制一样,传递一个副本,参数在函数内部的改变不会影响外部的基本类型值.如: 1 function add10(num){ 2 num += 10 ; 3 return num ; 4 } 5 var count = 10 ; 6 var result = add10(count); 7 alert(count);// 10 8 alert(result); //20 在向参数传递引用类型的值时,会把这个

uploadify的用法与动态传参 提供demo下载

---恢复内容开始--- 官网:http://www.uploadify.com/   一款不错的上传插件.官方文档http://www.uploadify.com/documentation/ 用法网上很多.今天快乐我在项目中想动态的穿选择,然后上传,同时服务器端,接受到参数与图片的地址.可是uploadify,直接是获取到,页面才加载的值.所以搜了一下.找到的办法.但都是旧版本的.今天我来写个新3.21版本. 要点     1.关闭自动上传.红色地方 $('#upload').uploadi

python函数传参是传值还是传引用?

首先还是应该科普下函数参数传递机制,传值和传引用是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传递. 值传递(passl-by-value)过程中,被调函数的形式参数作为被调函数的局部变量处理,即在堆栈中开辟了内存空间以存放由主调函数放进来的实参的值,从而成为了实参的一个副本.值传递的特点是被调函数对形式参数的任何操作都是作为局部变量进行,不会影响主调函数的实参变量的值. 引用传递(pass-

jsp内部传参与重定向传参

1 重定向地址栏会发生改变,因为它会发送两次请求,内部转发,地址栏不会发生改变,因为它只有一个请求2 重定向不能获取上一次请求中的参数,而内部转换可以3 内部转发可以访问WEB-INF下的资源,重定向不能访问WEB—INF下的资源4 重定向可以访问服务器以外的资源,内部转发只能访问当前服务器的资源 request代表内部传参response代表重定向传参 response:服务器->本机 request:本机->服务器 在跳转页面的时候会出现乱码,js中的转码方法request.setChar

函数传参课后练习—JS学习笔记2015-6-7(第51天)

老师的课后作业练习,看代码(最贵价格那个没有实现): 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>J函数传参——商品价格计算</title> 6 </head> 7 8 <body> 9