this.$route.params.id不显示 vue之动态路由获取url bug

今天写vue 动态路由在不同的用户界面后面会跟上不同的id 而在写的组件上想显示添加上去的id发现用this.$route.params.userid

一直在界面上不显示


$route只能获取活跃状态下路由的数据)
route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象


原因是在router文件夹下的index.js文件配置路由时
直接用export导出routes
没有先声明routes中的内容
正确的配置路由代码[index.js]:

//配置路由相关信息

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import xiaozhan from '../components/xz'
import user from '../components/user'


//1.通过Vue.use(插件),安装插件
Vue.use(Router)


//2.创建Router对象
const routes = [
  // 应用const声明 否则this.$router.params.userid无法获取数据
  {
    //一个映射关系配一个对象
    path: '/', //url后面为/ 显示的是默认页面(第一次就打开该页面 无需用户点击后再显示) 用HelloWorld组件
    //redirect:重定向
    redirect:'/hello'
  },
  {
    //一个映射关系配一个对象
    path: '/hello', //url后面为/ 显示的是默认页面(第一次就打开该页面 无需用户点击后再显示) 用HelloWorld组件
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    //一个映射关系配一个对象
    path: '/xz',
    name: 'xiaozhan',
    component: xiaozhan
  },
  {
    //一个映射关系配一个对象
    path: '/user/:userid', //若想动态的在url后添加id必须再加/:变量 
    name: 'user',
    component: user
  }
]
export default new Router({
  //配置路由和组件之间的应用关系
  routes,
  mode:'history', //生成的Url不带#
  linkActiveClass:'active1' //修改所有点击的类名 不用在每个上面都加
})

原先:

//配置路由相关信息

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import xiaozhan from '../components/xz'

//1.通过Vue.use(插件),安装插件
Vue.use(Router)

//2.创建Router对象
export default new Router({
  //配置路由和组件之间的应用关系
  routes: [
    {
      //一个映射关系配一个对象
      path: '', //url后面为/ 显示的是默认页面(第一次就打开该页面 无需用户点击后再显示) 用HelloWorld组件
      //redirect:重定向
      redirect:'/hello'
    },
    {
      //一个映射关系配一个对象
      path: '/hello', //url后面为/ 显示的是默认页面(第一次就打开该页面 无需用户点击后再显示) 用HelloWorld组件
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      //一个映射关系配一个对象
      path: '/xz',
      name: 'xiaozhan',
      component: xiaozhan
    }
  ],
  mode:'history', //生成的Url不带#
  activeClass:"active"
})

害 这件事情告诉我们一时的不在意导致了后面代码的错误 而且还有可能发现不了 要认真啊!!!

后附一张成功显示的图片:
在这里插入图片描述

这个显示的用户名是App.vue下的用户按钮中拼接的userid(记得使用v-bind拼)
yeah!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值