javascript - Vue Router 多层路由嵌套问题
本文介绍了javascript - Vue Router 多层路由嵌套问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
三层路由没有问题, 第四层出现问题了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>vue</title>
<link href="assets/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="app">
<h1>vue Router</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link class="layui-btn layui-btn-small" to="/foo">Go to Foo</router-link>
<router-link class="layui-btn layui-btn-small" to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div></body>
<script src="assets/vue/vue.js"></script>
<script src="assets/vue/vue-router.js"></script>
<script>
// <router-link class="layui-btn layui-btn-small" to="userfoo">/user/foo</router-link>
const Foo = { template: `<div> <router-link class="layui-btn layui-btn-small" to="foo/userfoo">第三级</router-link> <router-view></router-view></div>`}
const Bar = { template: `<div> <router-link class="layui-btn layui-btn-small" to="/bar/userbar">/user/bar</router-link> <router-view></router-view></div>` }
const User = {template: '<div>User {{ $route.params.id }}</div>'}
const userFoo = {template :`<div><router-link class="layui-btn layui-btn-small" to="/foo/userfoo/fooFour">第四级</router-link></div>`}
const userBar = {template :'<div>Bar</div>'}
const userFooChildren = `<div>Hello, I am four</div>`
const router = new VueRouter({
routes:[
{ path:'/user/:id' ,component:User},
{ path: '/foo', component: Foo ,
children: [
{ path : 'userfoo', component: userFoo ,
children: [
{
path : 'fooFour/:1',
component: userFooChildren
}
]
}
]
},
{ path: '/bar', component: Bar ,
children: [
{path: 'userBar', component: userBar }
]
}
]
})
const app = new Vue({
router
}).$mount('#app')
</script>
</html>
这是报错 Uncaught Error: [vue-router] route config "component" for path: fooFour/:1 cannot be a string id. Use an actual component instead.
解决方案
试试改成这样?
{ path : '/userfoo', component: userFoo ,
children: [
{
path : '/fooFour/:string',
component: userFooChildren
}
]
} 看报错信息是/:1出的问题,不能用1来作为string key
再来是,建议把斜杠补全,虽然可能影响不大
以上是错的
发现了,你的代码写错的,建议下次问问题好好整理一下代码的格式缩进什么的
const userFooChildren = { template: '<div>Bar</div>' }应该这么写
这篇关于javascript - Vue Router 多层路由嵌套问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
