Vue模块化开发使用路由

清疚 2022-08-31 07:18 172阅读 0赞

### 文章目录 ###

*  一、Vue模块化开发使用路由
 *   *  1、为项目安装vue-router,选择终端->新终端选项，在弹出的终端窗口中输入以下命令安装vue-router。
     *  2、在App.vue中设置导航链接和组件渲染的位置。修改其模板内容，并将应用HelloWorld组件的地方删除。修改后的代码如下所示。
     *  3、定义路由组件。在components目录下新建Home.vue、News.vue、Books.vue和Videos.vue四个文件。
     *  4、单独定义一个模块文件，配置路由信息。
     *  5、在程序入口main.js文件中，使用router实例让整个应用都有路由功能。

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

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

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

创建项目

vue create myroute

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70]  
安装vue-router

npm install vue-router@next --save

![在这里插入图片描述][1e51281253c244378963e39178e27a66.png]

## 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`明林，运行项目。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70]: /images/20220829/bbc3d6881ba749e9ad19cd0e07e34e2a.png
[1e51281253c244378963e39178e27a66.png]: /images/20220829/b7d75d5027f340559c079c972c862ffa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70 1]: /images/20220829/cfbc7872c96d472f92cf639726cc7ffa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70 2]: /images/20220829/9d1570f257ca430eabb3adf9c4ae409b.png