zoukankan      html  css  js  c++  java
  • vue-动态路由

      目前路由的跳转是写死的,比如to="/user",那就会跳到对应的组件;

      现在我们的需求是,我访问 /user/123 或 /user/456 再或 /user/dao等等,都能跳到同一页面,并且把 /user后面的参数给带过来。这个实际就像学习springmvc时的restful风格一样;

      分三步走:

        1. to的属性值是可变的,后面跟的参数取决于data

    <template>
      <div id="nav">
        <router-link :to="'/user/'+userId">User</router-link>
      </div>
      <router-view/>
    </template>
    
    <script>
    export default {
      data(){
        return {
          userId: 'huya'
        }
      }
    }

        2. 设置路由的映射规则,带占位符

    const routes = [
      {
        path: '/',
        name: 'portal',
        redirect: '/home'
      },
      {
        path: '/user/:userId', //占位符的名字是userId,在接收该参数时,参数名是有用的;如果访问的路径是/user,是匹配这个路由的,必须后面跟东西
        name: 'User',
        component: User
      }
    ]

        3. 在跳转的组件中接收该参数

    <template>
      <div>
        <h1>我是{{$route.params.userId}}</h1>
      </div>
    </template>

      一个非常要注意的地方:$router和 $route 是两个完全不一样的东西。$router是我们的 new VueRouter,可在全部的组件进行使用;$route是当前的路由;比如说是User路由 来 跳转到 User组件的,那当前的路由就是User路由

  • 相关阅读:
    Django-4
    Django-3
    博客中涉及的源码下载
    源码阅读系列:EventBus
    使用DFA做文本编辑器的自动提示
    计算机网络-IP类型判断
    感兴趣的文章搜集
    The Engine Document of JustWeEngine
    [译文]选择使用正确的 Markdown Parser
    Android源码阅读-Filter过滤器
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14605555.html
Copyright © 2011-2022 走看看