vue中嵌套路由的使用

最新推荐文章于 2024-04-29 23:47:56 发布

weixin_44022064

最新推荐文章于 2024-04-29 23:47:56 发布

阅读量50

点赞数

本文链接：https://blog.csdn.net/weixin_44022064/article/details/103816998

版权

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.home {
background-color: #abc;
}
</style>
</head>

<!-- 路由出口： -->
<p>出口位置：</p>
<router-view></router-view>

</div>

const Home = {
  template: `
    <div class="home">
      <h1>这是 后台首页 组件</h1>
      <ul>
        <li>
          <router-link to="/home/user">用户管理</router-link>
        </li>
        <li>
          <router-link to="/home/goods">商品管理</router-link>
        </li>
      </ul>
      
      <!-- 给子路由切换使用： -->
      <router-view></router-view>
    </div>
  `
}

const User = {
  template: `
    <div>这是 用户管理 组件</div>
  `
}
const Goods = {
  template: `
    <div>这是 商品管理 组件</div>
  `
}

// 创建路由实例
const router = new VueRouter({
  // 配置路由规则
  routes: [
    { path: '/login', component: Login },
    {
      // children 属性用来配置子路由：
      path: '/home', component: Home, children: [
        // 如果添加 /，那么， /user 会独立存在，不与 /home 有形式上的任何关系
        // { path: '/user', component: User },
        // { path: '/goods', component: Goods },

        // 说明：如果不加 /，那么，该路由会与父级路由合并： /home/user
        { path: 'user', component: User },
        { path: 'goods', component: Goods },
      ]
    },
  ]
})

const vm = new Vue({
  el: '#app',
  data: {},
  // 将路由实例挂到Vue实例中
  router
})

</script>
</body>

</html>