Vue-router 路由详解 多级路由

vue

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

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

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

首先引入vue路由

cnpm install vue-router --save-dev

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

项目大致结构如下

然后我们在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>

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

(浏览器地址栏)

(界面)

现在我们假设世界上有两家公司,一个叫苹果,一个叫华为,他们属于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>

此时界面变成这个样子

点击华为链接

如果你说,那苹果公司还有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>

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

点击iphone链接

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>标签下。

以上是 Vue-router 路由详解 多级路由 的全部内容, 来源链接: utcz.com/z/377613.html

回到顶部