<!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. gitlab docker安装配置ldap

    镜像下载 直接从dockerhub 下载官方镜像即可 docker pull gitlab/gitlab-ce 首次运行 在某个位置创建一个文件夹并运行如下命令: docker run --hostn ...

  2. 吴裕雄 21-MySQL 正则表达式

    MySQL 正则表达式在前面的章节我们已经了解到MySQL可以通过 LIKE ...% 来进行模糊匹配.MySQL 同样也支持其他正则表达式的匹配, MySQL中使用 REGEXP 操作符来进行正则表 ...

  3. hive 解jason字符串

    json 字符串为: 字段名为: json {"appId":36222,"deviceId":"12536521-7b3d-41f6-9c09-fd ...

  4. tensorflow降低版本

    tensorflow降低版本: pip install tensorflow==1.2.0 查看版本: import tensorflow as tf print(tf.__version__)

  5. rename批量修改文件并在后缀前加字段

    rename   's/\.jpg$/generate_badu\.jpg/' * 其中,'.'需要加转义斜杠'\',   '*'代表文件夹下所有文件

  6. CSS 原理

    CSS是一个描述HTML文档的样式语言. CSS描述HTML元素的显示方式. 本教程将教你CSS从基础到网页布局,学完本教程,可以设计出漂亮的网站. 本教程需要HTML知识为基础,学习HTML前往&l ...

  7. CAP与Base理论

    分布一致性的提出 在分布式系统中要解决的一个重要问题就是数据的复制.在我们的日常开发经验中,相信很多开发人员都遇到过这样的问题:假设客户端C1将系统中的一个值K由V1更新为V2,但客户端C2无法立即读 ...

  8. apicloud监听返回键（安卓试过）

    下面监听写在apiready里面 api.addEventListener({ //使用下方函数此处好像失效了 name: 'keyback' }, function(ret, err) { aler ...

  9. div下面多个a标签的点击事件，并且获取a的属性

    $('.fensiselect').on('click','a',function(){ var id= $(this).attr('fanid'); alert(id) })

  10. linux移植常见问题

    *************1.给板子添加新的驱动**************** 一.       驱动程序编译进内核的步骤在 linux 内核中增加程序需要完成以下三项工作:1. 将编写的源代码复制 ...