今天写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!