嵌套路由的实现（vue）

最新推荐文章于 2022-08-19 21:03:33 发布

richest_qi

最新推荐文章于 2022-08-19 21:03:33 发布

阅读量499

点赞数

分类专栏： Vue2 文章标签：嵌套路由 vue

本文链接：https://blog.csdn.net/qzw752890913/article/details/124855815

版权

Vue2 专栏收录该内容

84 篇文章 8 订阅

订阅专栏

文章目录

基本路由的使用
嵌套路由的实现

基本路由的使用

在这里插入图片描述

本篇的vue项目，代码涉及的主要文件有：

模板文件index.html
入口文件main.js
入口组件App.vue
路由规则：router/index.js
路由组件Home：pages/Home.vue
路由组件About：pages/About.vue

模板文件index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

入口文件main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

入口组件App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
            <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
            <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
              <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

router/index.js（路由规则）

import Vue from "vue";
import VueRouter from "vue-router";
import About from "../pages/About.vue";
import Home from "../pages/Home.vue";

Vue.use(VueRouter);

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home
        }
    ]
})

pages/About.vue（About组件）

<template>
  <h3>我是About的内容</h3>
</template>

<script>
export default {
  name:"About"
}
</script>

pages/Home.vue（Home组件）

<template>
  <h3>我是Home的内容</h3>
</template>

<script>
export default {
    name:"Home"
}
</script>

嵌套路由的实现

在这里插入图片描述
基于以上实例，来实现嵌套路由。路由结构如下：

/about，About组件
/home，Home组件
- /home/news，News组件
- /home/message，Message组件

在pages文件夹下新建：News.vue，即News组件。
在pages文件夹下新建：Message.vue，即Message组件。

代码更新涉及的文件有：

router/index.js，即路由规则
pages/Home.vue，即Home组件
pages/News.vue，即News组件
pages/Message.vue，即Message组件

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import About from "../pages/About.vue"
import Home from "../pages/Home.vue"
import News from "../pages/News.vue";
import Message from "../pages/Message.vue";

Vue.use(VueRouter);

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"/home/news",
                    component:News
                },
                {
                    path:"/home/message",
                    component:Message
                }
            ]
        }
    ]
})

Home.vue（Home组件）

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
        </li>
        <li>
          <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
        </li>
      </ul>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
    name:"Home"
}
</script>

News.vue（News组件）

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

<script>
export default {
    name:"News"
};
</script>

Message.vue（Message组件）

<template>
  <div>
    <ul>
      <li><a href="/message1">message001</a>&nbsp;&nbsp;</li>
      <li><a href="/message2">message002</a>&nbsp;&nbsp;</li>
      <li><a href="/message/3">message003</a>&nbsp;&nbsp;</li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"Message"
};
</script>