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

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

面对疾风ba

12638人浏览 · 2021-03-04 20:23:36

面对疾风ba · 2021-03-04 20:23:36 发布

什么是路由

对于普通的网站，所有的超链接都是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>