vue中路由的使用-通过this.$route.params来获取路由中的参数

本文主要是介绍vue中路由的使用-通过this.$route.params来获取路由中的参数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

什么是路由

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在 vue 中使用 vue-router

导入 vue-router 组件类库：
使用 router-link 组件来导航
使用 router-view 组件来显示匹配到的组件
创建使用Vue.extend创建组件
创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
使用 router 属性来使用路由规则

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 1. 导入 vue-router 组件库 --><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><title>Document</title>
</head>
<body><div id="app"><!-- 2. 使用 router-link 组件来导航 --><router-link to="/login">登录</router-link><router-link to="/register">注册</router-link>  <!-- 3. 使用 router-view 组件来显示匹配到的组件 --><router-view></router-view></div>  <script>// 4. 创建 登录 注册 组件var login = Vue.extend({template: '<h1>登录组件</h1>'});var register = Vue.extend({template: '<h1>注册组件</h1>'});// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则var router = new VueRouter({routes: [//当请求地址默认'/'的时候定位到'/login'{ path: '/', redirect: '/login' },{ path: '/login', component: login },{ path: '/register', component: register }]});var vm = new Vue({el: '#app',data: {},router: router // 6.使用 router 属性来使用路由规则});</script>
</body>
</html>

效果展示：
在这里插入图片描述

在路由规则中定义参数

在规则中定义参数
通过 this.$route.params来获取路由中的参数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 1. 导入 vue-router 组件库 --><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><title>Document</title>
</head>
<body><div id="app"><router-link to="/login/12/ls">登录</router-link><router-link to="/register">注册</router-link><router-view></router-view></div>  <script>var login={//通过 `this.$route.params`来获取路由中的参数template:'<h1>登录组件--登录id：{{this.$route.params.id}}---登录名为：{{this.$route.params.name}}</h1>'}var register={template: '<h1>注册组件</h1>',}var router = new VueRouter({routes:[{path:'/login/:id/:name', component: login},{path: '/register', component: register}]})var vm = new Vue({el: '#app',data: {},router: router });</script>
</body>
</html>