模块化开发使用前端路由也是遵照上一篇文章的步骤,只是形式上有些变化。先利用Vue CLI创建一个Vue3.0的脚手架项目,项目名为myroute,直接选择Default(Vue 3 Preview)([Vue 3] babel,eslint),开始项目创建。项目创建成功后启动VSCode打开项目所在文件夹,接下来按照以下步骤开始前端路由的配置。
创建项目
vue create myroute
安装vue-router
npm install vue-router@next --save
App.vue
<template>
<div>
<img alt="Vue logo" src="./assets/logo.png">
<p>
<router-link to="/">主页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/books">图书</router-link>
<router-link to="/videos">视频</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Home.vue
<template>
<div>主页面</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
News.vue
<template>
<div>新闻页面</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
Books.vue
<template>
<div>图书页面</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
Videos.vue
<template>
<div>视频页面</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
在src目录下新建一个router文件夹,在该文件夹下新建一个index.js文件。编辑该文件 index.js
import Home from '@/components/Home'
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import { createRouter,createWebHashHistory } from 'vue-router'
//定义路由
const routes=[
{
path:'/',
component:Home
},
{
path:'/news',
component:News
},
{
path:'/books',
component:Books
},
{
path:'/videos',
name:'videos',
component:Videos
}
]
export default createRouter({
history:createWebHashHistory(),
routes:routes
})
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
在基于Vue.js的项目开发中,如果要导入一个目录中的index.js文件,可以直接导入该目录,内置的webpack会自动导入index.js文件。
至此,前端路由已经全部配置完毕。打开终端窗口,输入npm run serve
明林,运行项目。