今天我来分享一下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>标签下。
3755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
