vue三级路由
昨天写了一个vue三级路由,才开始以为和两级写法一样,但是却报错了,经过查询。。。找到正确的写法,今天就分享一下给大家。。vue中的router的index.js文件中:import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Login from '../vi
·
昨天写了一个vue三级路由,才开始以为和两级写法一样,但是却报错了,经过查询。。。找到正确的写法,今天就分享一下给大家。。
vue中的router的index.js文件中:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/login/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/',
name: 'Home',
component: Home,
// meta路由自身自带的属性
meta: {
auth: true,
},
children: [{
path: '/',
name: 'User',
component: () => import('../views/home/user/User.vue')
},
// 商品列表
{
path: '/goods',
name: 'Goods',
component: () => import('../views/home/card/Goods.vue'),
children: [{
path: '/',
name: 'GoodDetail',
component: () => import('../views/home/card/GoodDetail.vue'),
},
{
path: '/goods/add',
name: 'Addlist',
component: () => import('../views/home/card/Addlist'),
}
]
},
]
},
]
const router = new VueRouter({
routes
})
export default router
然后点击事件执行:
<el-button type="primary" @click="addGoodlist">添加商品</el-button>
export default {
methods: {
// 添加商品
addGoodlist() {
this.$router.push("/goods/add");
}
}
}
实现就是这样,容易错的点就是路径容易写错。
注:是/goods/add
不是/add
2023年2.28
经过评论区小伙伴提出的看法,我去实践了一下,发现下面这种写法也可以实现:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
// meta路由自身自带的属性
meta: {
auth: true,
},
children: [{
path: '/',
name: 'User',
component: () => import('../views/home/user/User.vue')
},
// 商品列表
{
path: '/goods',
name: 'Goods',
component: () => import('../views/home/card/Goods.vue'),
children: [{
path: '/',
name: 'GoodDetail',
component: () => import('../views/home/card/GoodDetail.vue'),
},
{
path: 'add',
name: 'Addlist',
component: () => import('../views/home/card/Addlist'),
}
]
},
]
}
]
事件执行为:
addGoodlist() {
this.$router.push("/add");
}
更多推荐
已为社区贡献7条内容
所有评论(0)