vue vue-route 传参 $route.params

最新推荐文章于 2025-06-02 15:12:55 发布

weixin_30438813

最新推荐文章于 2025-06-02 15:12:55 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yanxiatingyu/p/9518692.html

本文通过一个实战案例介绍了Vue-router的基本使用方法，包括路由组件的定义、路由规则的设置及参数传递等核心内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 1.0占位-->
        <!-- vue 2  -->
        <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>