vue路由获取路由参数

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/sese/p/9595625.html

时间: 2024-10-14 02:09:28

vue路由获取路由参数的相关文章

vue 动态获取路由在对组件进行处理是报错,导致无法进入页面

vue 动态获取路由在对组件进行处理是报错,导致无法进入页面function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串,转换为组件对象const accessedRouters = asyncRouterMap.filter(route => { if (route.component) { if (route.component === 'Layout') {//Layout组件特殊处理 route.component = Layou

Vue 路由规则--传参数

1,query方法去获取参数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa

AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve

本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 项目文件结构 node_modules/ public/.....app/..........bower_components/...............toastr/....................toastr.min.css....................toastr.min

asp.net mvc获取路由参数

学习了mvc有一段时间了,本以为直接可以通过request对象直接获取路由参数呢,后来实验了一下发现想错了,mvc有专门获取路由参数的方式,在不同的地方,获取路由参数的方式也不一样,这里分别说一下,在controller,非controller的类里面,和view里如何获取路由参数: 1.在controller里获取路由参数: var controller = RouteData.Values["controller"];//action,id或其他路由参数同理 2.在view中获取:

React router 4 获取路由参数,跨页面参数

1. match通过路径 <Route path="/path/:name" component={example} /> 路由组件内获取参数使用 this.props.match.params.name 2. query String 通过search //mirrorx中使用push的参数search,link中使用与此类似 actions.routing.push({ pathname: '/path/example', search: `?name={name}`,

angular6 路由拼接查询参数如 ?id=1 并获取url参数

angular6 路由拼接查询参数如 ?id=1 并获取url参数 路由拼接参数: <div class="category-border" [routerLink]="['/list/' + category.id + '/' + category.slug]" [queryParams]="{id: 1}"> 拼接后在浏览器显示: 域名  http://localhost:4200/?id=1 angular 获取参数 id 的值

vue基础——动态路由匹配(带参数的路由)

路由里面带参数,这种情况也是比较常见的,具体用法如下所示: 原文地址:https://www.cnblogs.com/chaoyueqi/p/10244143.html

原生js 获取路由参数

方法一//获取url参数function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURI(r[2]); return null; }va

vue.js之路由

Vue.js本身只提供数据与视图绑定及组件化等功能,如果想用它来开发一个完整的SPA(单页面应用),我们就还需要使用一些Vue.js的插件.今天我学习一种叫做Vue-router的插件,用来提供路由管理这个功能. 一.安装vue-router插件 1.安装bower:和npm类似的 bower-> (前端)包管理器 npm install bower -g 验证: bower --version bower用法: bower install <包名> 安装包 bower uninstal