<!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. webpack打包avalon＋mmRouter

    这是上一篇<webpack打包avalon+oniui+jquery>的姐妹篇,avalon 的高级应用篇.大家要知道,现在最流行的网页架构就是SPA,SPA能提高用户体验.用户许多数据都 ...

  2. MVC缺点总结

    MVC的缺点: 1.完全理解MVC比较复杂. 由于MVC模式提出的时间不长,加上同学们的实践经验不足,所以完全理解并掌握MVC不是一个很容易的过程. 2.调试困难. 因为模型和视图要严格的分离,这样也 ...

  3. (转)JPA + SpringData

    jpa + spring data 约定优于配置 convention over configuration http://www.cnblogs.com/crawl/p/7703679.html 原 ...

  4. winform下利用webBrowser执行javascript

    目前很多网站为了防止恶意提交表单信息,大多都采用了加密的方式对提交信息进行处理,加密处理后通过POST提交给服务器验证,这种操作一般都是用Javascipt进行加密,若是我们想要正确提交表单到网站,就 ...

  5. 【转】Unity网格合并_材质合并

    原帖请戳:Unity网格合并_材质合并 写在前面: 从优化角度,Mesh需要合并. 从换装的角度(这里指的是换形状.换组成部件的换装,而不是挂点型的换装),都需要网格合并.材质合并.如果是人物的换装, ...

  6. k近邻算法(KNN)

    k近邻算法(KNN) 定义:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别. from sklearn.model_selection ...

  7. CSS 边框图像

    border-image border-image 可以将图像应用到盒子的边框上. border-image 属性需要3个值同时存在: URL 图片的地址 切割图片的位,4个边需要写4个值 如何处理边 ...

  8. 05_ssm基础(六)之SpringMVC

    36.springMVC之入门 1.springMVC简介 Spring MVC是基于MVC模式的一个Web框架,它解决WEB开发中常见的问题(参数接收.文件上传.表单验证.国际化.等等),而且使用简 ...

  9. svn 更新lib库时，报错

    svn: E195012: Unable to find repository location for svn:// in revision 9718 Can't revert without re ...

  10. EasyUI值的清空与获取

    清空: 一般值 $("#searchx").val(""); 时间选择框 $('#starttime').datetimebox('setValue', '') ...