<!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函数基础：调用内置函数&定义函数

    调用内置函数 有很多内置函数,在使用中需要积累.这里只举两个例子: 分别调用abs和数据类型转换,注意当入参类型错误时候会报错 ''' print('abs(-100)') abs(-100) pri ...

  2. C++ VC实现对话框窗口任意分割

    最近写MFC的程序,想在对话框里实现窗口的任意分割.现在网络资料一大抄,找个东西实在麻烦.总算这个很简单,很快就搞定了,写下来做个笔记.    个人认为简单问题最好就是直接贴源代码,一看就明白,说来说 ...

  3. IT蓝豹强烈推荐：符合1-2年工作经验，开发中的难点及相关优化：

    IT蓝豹强烈推荐:符合1-2年工作经验,开发中的难点及相关优化: IT蓝豹 ------------------> sqlite数据库版本升级 1.sqlite升级步骤: 1.自己写一个类继承自 ...

  4. 吴裕雄 09-MySQL删除数据表

    以下为删除MySQL数据表的通用语法:DROP TABLE table_name; DROP TABLE runoob_tbl; 使用PHP脚本删除数据表PHP使用 mysqli_query 函数来删 ...

  5. jquery.cookie介绍和用法

    1.依赖jQuery库 2.浏览器兼容性情况 3.下载 官方github:https://github.com/carhartl/jquery-cookie 4.使用 创建一个整站cookie $.c ...

  6. vue-cli结构介绍

    vue-cli是vue项目开发的脚手架,非常方便,其结构大致如下, 其中static是存放静态资源的,存放的静态数据可以访问到,如果在static文件夹中创建mock文件夹,在mock文件夹中创建in ...

  7. vue 模拟下拉树

    // 使用vue 做表格部分其他部分暂不修改 var app = new Vue({ el: "#freightTbl", watch: { //监听表格数据的变化[使用 watc ...

  8. intellij idea 搜索功能快捷键

    intellij idea是一款超智能的编译器,因此在信息资源的搜索功能中给我们的用户提供了很大的帮助.同样作为java编译器的eclipse和myeclipse在搜索方面就比intellij ide ...

  9. java中File类的常用方法总结

    java中File类的常用方法 创建: createNewFile()在指定的路径创建一个空文件,成功返回true,如果已经存在就不创建,然后返回false. mkdir() 在指定的位置创建一个此抽 ...

  10. JIT物料在途未清PO作为供给

    以下是本应在TEMP中处理,目前是写到FP_CHECK_SAP_DATA中 ----JIT物料在途未清PO作为供给 add by landor on 20180809 INSERT INTO SAP_ ...