首页 > 其他 > 详细

Vue路由获取路由参数

时间:2019-06-18 16:31:20      阅读:136      评论:0      收藏:0      [点我收藏+]

原文参考:https://www.cnblogs.com/sese/p/9595625.html

vue路由设置路由参数有2种方式:

1.通过query配置:

<router-link :to="{ name:‘login‘,query:{id:1} }">登录</router-link>

通过query配置的路径显示如下:

技术分享图片

 

2.通过params配置:

<router-link :to="{ name:‘register‘,params:{‘name‘:‘San‘} }">注册</router-link>

通过query配置的路径显示如下:

 技术分享图片

通过该方法配置的参数,需要在配置路由的时候给参数留个坑,如下图:

技术分享图片

 

 获取路由参数的方法:

1.通过query配置的:

this.$route.query

 

 2.通过params配置的:

this.$route.params

 

相关代码:

技术分享图片
<!DOCTYPE html>
<html lang="en">

<head>
    <title>路由参数</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>

<body>

    <div id="app">
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        var Login = {
            template:`<div>我是登录页面</div>`,
            created() {
                console.log(this.$route.query)
            },
            
        }

        var Register = {
            template:`<div>我是注册页面</div>`,
            created() {
                console.log(this.$route.params)
            },
        }

        Vue.use(VueRouter);

        var router = new VueRouter({
            routes:[
                {name:‘login‘,path:‘/login‘,component:Login},
                //通过params传递的路由参数需要用 :参数名 来占个坑
                {name:‘register‘,path:‘/register/:name‘,component:Register}
            ]
        });
        
        var App = {
            template:`
                <div>
                    <router-link :to="{ name:‘login‘,query:{id:1} }">登录</router-link>
                    <router-link :to="{ name:‘register‘,params:{‘name‘:‘San‘} }">注册</router-link>
                    <router-view></router-view>
                </div>
            `
        }

        var vm = new Vue({
            el: ‘#app‘,
            router:router,
            components: {
                app:App
            },
            template:`<app></app>`
        });
    </script>

</body>

</html>
技术分享图片

 

补充说明:

$route:路由信息对象,只读对象;

$router:路由操作对象 ,只写对象。 

 

 

原文参考:https://www.cnblogs.com/superlizhao/p/8527317.html

一、<router-link :to="...">
  to里的值可以是一个字符串路径,或者一个描述地址的对象。例如:

技术分享图片
// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:‘apple‘}"> to apple</router-link>
// 命名路由
<router-link :to="{name: ‘applename‘}"> to apple</router-link>
//直接路由带查询参数query,地址栏变成 /apple?color=red
<router-link :to="{path: ‘apple‘, query: {color: ‘red‘ }}"> to apple</router-link>
// 命名路由带查询参数query,地址栏变成/apple?color=red
<router-link :to="{name: ‘applename‘, query: {color: ‘red‘ }}"> to apple</router-link>
//直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
<router-link :to="{path: ‘apple‘, params: { color: ‘red‘ }}"> to apple</router-link>
// 命名路由带路由参数params,地址栏是/apple/red
<router-link :to="{name: ‘applename‘, params: { color: ‘red‘ }}"> to apple</router-link>
技术分享图片

二、router.push(...)方法
  同样的规则也适用于router.push(...)方法。

技术分享图片
// 字符串
router.push(‘apple‘)
// 对象
router.push({path:‘apple‘})
// 命名路由
router.push({name: ‘applename‘})
//直接路由带查询参数query,地址栏变成 /apple?color=red
router.push({path: ‘apple‘, query: {color: ‘red‘ }})
// 命名路由带查询参数query,地址栏变成/apple?color=red
router.push({name: ‘applename‘, query: {color: ‘red‘ }})
//直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
router.push({path:‘applename‘, params:{ color: ‘red‘ }})
// 命名路由带路由参数params,地址栏是/apple/red
router.push({name:‘applename‘, params:{ color: ‘red‘ }})
技术分享图片

三、注意点

1、关于带参数的路由总结如下:

无论是直接路由“path" 还是命名路由“name”,带查询参数query,地址栏会变成“/url?查询参数名:查询参数值“;
直接路由“path" 带路由参数params params 不生效;
命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;

2、设置路由map里的path值:

 带路由参数params时,路由map里的path应该写成:  path:‘/apple/:color‘ ;
 带查询参数query时,路由map里的path应该写成: path:‘/apple‘ ;

3、获取参数方法:

在组件中:  {{$route.params.color}}
在js里: this.$route.params.color

Vue路由获取路由参数

原文:https://www.cnblogs.com/robinunix/p/11045870.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!