博客

今天我来分享一下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>，加载组件。在