Vue-router 路由详解 多级路由

时间：2024-04-04 17:34:34

今天我来分享一下vue路由方面的心得体会。

文章源码位置 https://github.com/JustDoIt521/originCoding/tree/master/vue-router-base

使用的脚手架为Vue3.0，IDE为VSCode

首先引入vue路由

cnpm install vue-router --save-dev

然后我们在src目录下建立文件夹router,并创建文件index.js

项目大致结构如下

Vue-router 路由详解 多级路由

然后我们在view文件夹(新建一个)下创建文件 company.vue作为一个组件。company.vue代码如下

<template>
  <div id="company">
    <h2>welcome to company</h2>
  </div>
</template>

在index.js中创建路由，并引入company.vue文件。

import Vue from "vue"
import Router from "vue-router"

//引入组件
import company from "@/views/company.vue"
//路由引入
Vue.use(Router);

const router = new Router({
  routes:[
  {
    name: "company", //路由名称
    path: "/company", //路由路径
    component: company //路由对应组件
  },
  {
    path: "/",   //主路由重定向至company组件
    redirect: "/company"
  }]
})

//将路由组件暴露出去
export default router;

 如此我们就可以把company组件引入路由，那么我们要想使用company组件，还需要在main.js中引入路由

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

Vue.config.productionTip = false

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

此时我们已经引入了路由到项目中，那么该怎么让组件显示出来，显示在哪里呢？

我们需要用到<router-view>，加载组件。在App.vue中此处添加代码<router-view></router-view>

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" style="width:100px;height:100px;">
    <router-view></router-view>
  </div>
</template>

然后让项目运行，你就可以看到如下界面，是不是很开心？

Vue-router 路由详解 多级路由(浏览器地址栏)

Vue-router 路由详解 多级路由（界面）

现在我们假设世界上有两家公司，一个叫苹果，一个叫华为，他们属于company组件的子组件

声明组件huawei.vue   apple.vue

<template>
  <div id="apple">
    <h3>welcome to apple</h3>
  </div>
</template>

<template>
  <div id="huawei">
    <h3>welcome to huawei</h3>
  </div>
</template>

因为它们都是公司的范围，我们将其声明为company的子组件。因此在router文件夹下index.js中代码变更如下

import Vue from "vue"
import Router from "vue-router"

//引入组件
import company from "@/views/company.vue"
import huawei from "@/views/huawei.vue"
import apple from "@/views/apple.vue"
//路由引入
Vue.use(Router);

const router = new Router({
  routes:[
  {
    name: "company", //路由名称
    path: "/company", //路由路径
    component: company, //路由对应组件
    children:[
      {
        name: "apple",
        path: "apple",
        component: apple
      },
      {
        name: "huawei",
        path: "huawei",
        component: huawei
      }
    ]
  },
  {
    path: "/",   //主路由重定向至company组件
    redirect: "/company"
  }]
})

//将路由组件暴露出去
export default router;

同时company.vue文件代码变更如下

<template>
  <div id="company">
    <h2>welcome to company</h2>
    <div style=";margin-left:auto;margin-right:auto;flex-direction:row;">
      <div>
      <router-link to="/company/huawei"><h3>华为</h3></router-link>
      </div>
      <div>
      <router-link to="/company/apple"><h3>苹果</h3></router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

此时界面变成这个样子

Vue-router 路由详解 多级路由

点击华为链接

Vue-router 路由详解 多级路由

如果你说，那苹果公司还有ipad，mac，iphone产品呢。那我们改造三级路由出来

在view文件夹下新建三个组件 ipad.vue  mac.vue  iphone.vue。代码结构类似，此处仅放出ipad.vue的代码

<template>
  <div id="ipad">
    <span>welcome to ipad</span>
  </div>
</template>

index.js文件代码变化如下

import Vue from "vue"
import Router from "vue-router"

//引入组件
import company from "@/views/company.vue"
import huawei from "@/views/huawei.vue"
import mac from "@/views/mac.vue"
import apple from "@/views/apple.vue"
import ipad from "@/views/ipad.vue"
import iphone from "@/views/iphone.vue"
//路由引入
Vue.use(Router);

const router = new Router({
  routes:[
  {
    name: "company", //路由名称
    path: "/company", //路由路径
    component: company, //路由对应组件
    children:[
      {
        name: "apple",
        path: "apple",
        component: apple,
        children: [
          {
            name: "mac",
            path: "mac",
            component: mac
          },
          {
            name: "iphone",
            path: "iphone",
            component: iphone
          },
          {
            name: "ipad",
            path: "ipad",
            component: ipad
          },
        ]
      },
      {
        name: "huawei",
        path: "huawei",
        component: huawei
      }
    ]
  },
  {
    path: "/",   //主路由重定向至company组件
    redirect: "/company"
  }]
})

//将路由组件暴露出去
export default router;

apple.vue组件代码变化如下

<template>
  <div id="apple">
    <h3>welcome to Apple</h3>
    <router-link to="/company/apple/iphone">
      <h4>iphone</h4>
    </router-link>
    <div>
      <router-link to="/company/apple/ipad">
        <h4>ipad</h4>
      </router-link>
    </div>
    <div>
      <router-link to="/company/apple/mac">
        <h4>mac</h4>
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

此时主页不会发生变化，但是当我们点击“苹果”链接，进行路由跳转的时候

Vue-router 路由详解 多级路由

点击iphone链接

Vue-router 路由详解 多级路由iphone组件加载。

总结 这篇文章简单介绍了vue路由的引入以及二级三级路由的跳转，组件，子组件的问题。有同学可能会问：路由跳转的时候它是怎么确定跳转二级三级的呢？ 很简单，我们在app.vue中加载<router-view> 会加载一级路由。此时我们在app中显示的company就是app的子组件，观察company组件代码，路由的写法是 <router-link to="/company/xxx"></router-link>当我们点击company组件内的路由链接，vue-router发现这是跳转到company组件下的xxx组件。那么router会在index.js中company的childern数组内找到xxx组件，然后自动加载在company组件内的<router-view>标签下，iphone、ipad、mac加载在apple组件下的道理一样。router会根据路由链接将组件加载到到对应组件下的<router-view>标签下。

相关文章