使用的脚手架为Vue3.0，IDE为VSCode
首先引入vue路由
cnpm install vue-router --save-dev
然后我们在src目录下建立文件夹router,并创建文件index.js
项目大致结构如下
然后我们在view文件夹(新建一个)下创建文件 company.vue作为一个组件。company.vue代码如下
welcome to company
在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')
此时我们已经引入了路由到项目中，那么该怎么让组件显示出来，显示在哪里呢？
我们需要用到，加载组件。在App.vue中此处添加代码
App.vue
然后让项目运行，你就可以看到如下界面，是不是很开心？
(浏览器地址栏)
（界面）
现在我们假设世界上有两家公司，一个叫苹果，一个叫华为，他们属于company组件的子组件
声明组件huawei.vue apple.vue
welcome to apple
welcome to huawei
因为它们都是公司的范围，我们将其声明为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文件代码变更如下
welcome to company
华为
苹果
此时界面变成这个样子
点击华为链接
如果你说，那苹果公司还有ipad，mac，iphone产品呢。那我们改造三级路由出来
在view文件夹下新建三个组件 ipad.vue mac.vue iphone.vue。代码结构类似，此处仅放出ipad.vue的代码
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组件代码变化如下
welcome to Apple
iphone
ipad
mac
此时主页不会发生变化，但是当我们点击“苹果”链接，进行路由跳转的时候
点击iphone链接
iphone组件加载。
总结 这篇文章简单介绍了vue路由的引入以及二级三级路由的跳转，组件，子组件的问题。有同学可能会问：路由跳转的时候它是怎么确定跳转二级三级的呢？ 很简单，我们在app.vue中加载 会加载一级路由。此时我们在app中显示的company就是app的子组件，观察company组件代码，路由的写法是 当我们点击company组件内的路由链接，vue-router发现这是跳转到company组件下的xxx组件。那么router会在index.js中company的childern数组内找到xxx组件，然后自动加载在company组件内的标签下，iphone、ipad、mac加载在apple组件下的道理一样。router会根据路由链接将组件加载到到对应组件下的标签下。
