[标准]Vue 路由嵌套与动态路由

zhuanbike 2022-1-18 773

路由嵌套:可以理解成目录路径

直接上代码,在路由组件中写入,对应的vue内容按需写:

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
export default new Router({
  mode:"history",//history模式可以去掉#  hash模式不请求服务端。history刷新是实实在在地去请求服务器的,不玩虚的。
  routes: [
    {
      path: '/standard',
      name: 'standard',
      component: resolve => require(['@/components/standard'], resolve),//父级目录
      children: [
        {
          path: 'a',
          component: resolve => require(['@/components/a'], resolve),
        },
        {
          path: 'b',
          component: resolve => require(['@/components/b'], resolve),
        },
        {
          path: 'c',
          component: resolve => require(['@/components/c'], resolve),
        },
      ]
    },
  ]
})

复杂的动态路由可以参考下面文章:

https://www.jianshu.com/p/4f2566b67989

我们再写一个简单的动态路由范本:

vue展示文件代码:

<router-link to="/user/1">
<el-button class="children">用户中心</el-button>
</router-link>

router路由组件写:

{ path: '/user/:id', component: user }

获取ID的vue组件

<template>
<div>
<h2>这是user动态路由组件 {{ $route.params.id }} </h2>
</div>
</template>
<script>
export default {
name: 'user'
}
</script>


最新回复 (1)
  • zhuanbike 2022-1-18
    0 引用 2
    查询参数/user/2?name=xiaoming age=18
    使用query来获取查询参数
    $route.query.name
发新帖