<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue-router</title>
</head>
<body>
    <div id="app">
        <!-- a href=# v-link="{path:'login'}">登录</a>
        <a href=# v-link="{path:'register'}">注册</a> -->
        <!-- --><!--version vue .0占位-->
        <!-- vue   -->
        <router-link to="/login">login</router-link>
        <router-link to="/register">register</router-link>
         <router-view></router-view>
    </div>
<link rel="stylesheet" href="./dist/css/bootstrap.css">
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script src="vue-resource1.5.1.js"></script>
<script type="text/javascript">

//开始路由代码的编写
var App= Vue.extend({});

// var login=Vue.extend({
//     tempate:'<h1>登录页面</h1>'
// });
// var register=Vue.extend({
//     tempate:'<h1>注册页面</h1>',
//     data(){
//         return{
//             id:1,
//             uname:'',
//             upwd:''
//         }
//     },
//     created:function(){
//         this.id=this.$route.params.id;
//     }
// });

const login={
                template:'<h1>this is login {{ $route.params.msg }}</h1>',
                data(){
                    return{
                        msg:'参数传递'
                    }
                }
            };
const register={
                template:'<h1>this is register {{ $route.params.uname}}-{{ $route.params.upwd}}</h1>',
                data(){
                    return{
                        uname:'用户名',
                        upwd:'用户密码'
                    }
                }
            };

//设置路由规则
//vue version 1.0
//var  router =new VueRouter();
// router.map({
//     'login':{component:login},
//     'register/:uname/:upwd':{component:register}
// });
//开启路由
// router.start(App)
//默认跳转到 login
// router.redirect('/':'/login');
//传参

//vue version 2
routes=[
        {path:'/login/:msg',component:login},
        {path:'/register/:uname/:upwd',component:register}
        ]
var  router =new VueRouter({routes});
// router.redirect('/':'login');
const app=new Vue({
    router
}).$mount('#app');

</script>
</body>
</html>

vue vue-route 传参 $route.params的更多相关文章

  1. vue路由组件传参

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...

  2. 18 vue 动态路由传参

    params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...

  3. vue 路由 URL传参

    源码如下: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 const ro ...

  4. vue $router.push 传参的问题

    $router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...

  5. vue 父子组件传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  6. vue的router-link传参问题

    一般来说,可以通过查询字符串的方式将参数传过去,方法如下: <router-link :to="{path:'/Detail', query:{ name: id }}"&g ...

  7. Angular route传参

    从 router-link-page1 跳转 router-link-page2 和 router-link-page3 通过自定义路由 设置router-link-page2的路由后有3个参数,pa ...

  8. Vue路由query传参

    1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...

  9. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

  10. 8、vue路由跳转 params与query 路由传参

    params与query router文件下index.js里面,是这么定义路由的: { path: '/about', name: 'About', component: About } 用quer ...

随机推荐

  1. 软件工程github使用小结

    1.在 https://github.com/join 这个网址处申请注册一个Github账号,申请成功后可在https://github.com/login 处利用刚刚注册的账号进行登录,才能开始在 ...

  2. Chatbot中的填槽(Slot Filling)（转）

    以下内容是学习了@我偏笑发布在公众号hanniman文章后,加上自己观点重新输出配图的文章 原文链接:http://t.cn/RE0FkgD 跳槽,吐槽,匹诺曹都听过,这个填槽,emmmm,黑人问号脸 ...

  3. CentOS下mysql数据库常用命令

    1.更改root密码 mysqladmin -uroot password 'yourpassword' 2.远程登陆mysql服务器 mysql -uroot -p -h192.168.137.10 ...

  4. java-学习6

    public class arryTest4 { //对整型数组按照由小到大的顺序进行排序 public static void main(String[] args) { int score[]= ...

  5. Java NIO Files

    Java NIO Files Files.exists() Files.createDirectory() Files.copy() Overwriting Existing Files Files. ...

  6. azkaban编译以及安装(调度系统)

    编译源码 下载azkaban源码 git clone https://github.com/azkaban/azkaban.git   jdk要求是1.8以上版本 export JAVA_HOME=/ ...

  7. python对ftp进行操作

    背景:需要对ftp进行操作,涉及上传和下载操作   from ftplib import FTP ftp = FTP(host=“ftp的hostname",user=‘登录用户名', pa ...

  8. preg_match一些问题

    <?php$string = 'The quick brown fox jumps over the lazy dog.';$patterns = array();$patterns[0] =  ...

  9. JS在严格模式和非严格模式的区别

    若想在严格模式下使用JS,需要在文件的第一行加上“use strict”,在实际开发中,常常将“use strict”加入到闭包的内部 具体是: 整个脚本中使用:在这个JavaScript文件开头写' ...

  10. gitlab-ce 安装、汉化与阿里邮箱配置（注意是CE）

    环境准备 yum install curl openssh-server openssh-clients postfix cronie policycoreutils-python –y curl h ...