<!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. python实现排序算法三：插入排序

    插入排序基本思想:假设一个无序数组A,则对于只有一个元素A[0]的子数组C来讲,其是有序的,然后将A[1]插入到C中,则就是将A[1]与A[0]进行比较,如果A[1]比A[0]小,则交换两者的顺序,这 ...

  2. fopen的type的值的意思

    ┌──┬────┬───────┬────────┐      │type│读写性  │文本/2进制文件│建新/打开旧文件 │      ├──┼────┼───────┼────────┤      ...

  3. 使用navigator对象,输出当前浏览器的信息

    <script type="text/javascript"> with(document) { write("你的浏览器信息:<ol>" ...

  4. C#调用Delphi接口(ITest = interface)

    首先创建一个delphi的DLL工程 library testintfdll; { Important note about DLL memory management: ShareMem must ...

  5. JAVA仿百度分页

    最近在做一个仿百度网盘的网页小应用,找到了一个优雅简洁的分页插件,和百度搜索的分页很相似,对他进行了二次封装,拿出来跟大家分享下 插件源码 /** * This jQuery plugin displ ...

  6. 开发JSP自定义标签

    互联网上有很多种自定义标签,今天学的这种非常简单哟 1 编写一个普通类在类中定义一个经常使用得到的 函数 如public String toUpper(String str){ ...... } 2 ...

  7. 内核进程切换 switch_to

    参考: http://www.cnblogs.com/visayafan/archive/2011/12/10/2283660.html

  8. 通过GCEASY 和 jfr 发现运行时问题

    进入 /dev/shm  目录 ,gc-xxx-xx  的gc 文件 ,上次 gceasy  进行分析 另外 ,通过打开 飞行记录器  , 打开jmc  通过jmx  端口连接上去 ,并启用飞行记录器 ...

  9. get请求中url传参中文乱码问题--集锦

    一:get请求url中带有中文参数,有三种方式进行处理防止中文乱码 1.如果使用tomcat作为服务器,那么修改tomcat配置文件conf/server.xml中,在  <Connector  ...

  10. ECharts-初始化方法参数不能传入jquery对象

    ECharts-初始化方法参数不能传入jquery对象