今天我来分享一下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
项目大致结构如下
然后我们在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>标签下。