Vue-router动态路由

举报
学海无涯yc 发表于 2022/08/06 19:03:45 2022/08/06
【摘要】 文章目录一、动态路由1.1 设置动态路由1.2 动态给路由绑定userid二、在User组件里面显示id信息2.1 `this.$route`2.2 `this.$route.params`一、动态路由在某些情况下, 一个页面的path路径可能是不确定的, 比如我们进入用户界面时, 除了前面的/user之外, 后面还跟上用户的ID : /user/aaa1.1 设置动态路由import Vu...



一、动态路由

在某些情况下, 一个页面的path路径可能是不确定的, 比如我们进入用户界面时, 除了前面的/user之外, 后面还跟上用户的ID : /user/aaa

1.1 设置动态路由

import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'

// 安装插件
Vue.use(VueRouter)

// 配置路径和路由之间的映射关系
const routes = [
  {
    // 缺省的时候显示component里面的组件
    path: '',
    // 重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    // 动态路由,后面必须跟一个userId
    path: '/user/:userId',
    component: User
  }
]

// 创建路由组件
const router = new VueRouter({
  routes,
  // 修改为history模式
  mode: 'history'
})

export default router

1.2 动态给路由绑定userid

<template>
  <div id="app">
    <h2>我是标题</h2>
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <!-- 动态给to属性绑定userid -->
    <router-link v-bind:to="'/user/'+userid" tag="button">用户</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userid: 'lisi'
    }
  },
}
</script>

<style>
  .router-link-active{
    color: red;
  }
</style>

二、在User组件里面显示id信息

2.1 this.$route

this.$route匹配的是routes中处于活跃的路由

在这里插入图片描述

2.2 this.$route.params

this.$route.params : 表示路由里的参数

获取path 里面定义的userid : this.$route.params.userId
在这里插入图片描述

<template>
  <div>
    <h3>
      我是User
    </h3>
    <!-- 获取传递过来的userid -->
    <h2>{{$route.params.userid}}</h2>
  </div>
</template>

<script>
  export default {
    name: 'User',
  }
</script>

<style>

</style>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。