写文章

Vue模块化开发使用路由

我心飞翔 分类：vue

文章目录

一、Vue模块化开发使用路由

模块化开发使用前端路由也是遵照上一篇文章的步骤，只是形式上有些变化。先利用Vue CLI创建一个Vue3.0的脚手架项目，项目名为myroute,直接选择Default(Vue 3 Preview)([Vue 3] babel,eslint),开始项目创建。项目创建成功后启动VSCode打开项目所在文件夹，接下来按照以下步骤开始前端路由的配置。

1、为项目安装vue-router,选择终端->新终端选项，在弹出的终端窗口中输入以下命令安装vue-router。

创建项目

vue create myroute
Vue模块化开发使用路由

安装vue-router

npm install vue-router@next --save
Vue模块化开发使用路由

2、在App.vue中设置导航链接和组件渲染的位置。修改其模板内容，并将应用HelloWorld组件的地方删除。修改后的代码如下所示。

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>

3、定义路由组件。在components目录下新建Home.vue、News.vue、Books.vue和Videos.vue四个文件。

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>

4、单独定义一个模块文件，配置路由信息。

在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
})

5、在程序入口main.js文件中，使用router实例让整个应用都有路由功能。

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明林，运行项目。

Vue模块化开发使用路由

回复

我来回复

  • 暂无回复内容