[JavaScript知识库]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!