Vue--配置路由步骤

红太狼 2022-01-27 01:27 265阅读 0赞

首先我来说说，为什么项目中需要使用路由，通常我们跳转页面的话，页面都需要刷新进行HTTP请求，如果我们采用路由机制的话，页面不会进行刷新，减轻了服务器的负担。

本篇文章主要是用过一个小Demo来实现路由的搭建

在搭建路由之前，我们需要在项目的根目录下打开终端，进行路由模块的安装，输入

npm install vue-router --save-dev

安装好路由后重启项目，进行路由的搭建

## **①在main.js文件中引入路由，使用路由** ##

这个格式通常是固定的，一般是：import VueRouter from 'vue-router'

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

使用路由模块
    
    Vue.use(VueRouter)

## ②在main.js文件中配置路由 ##

//配置中的参数通常是固定的
        const router = new VueRouter({
          routes: [
            {path: "/",component:Home},
            {path: "/helloworld", component: HelloWorld}
          ],
          mode: 'history'    
        })

mode: ‘history’ 的作用主要是把默认的\#去除，通过情况在项目中都会加  
routes中绑定所设置的路径以及相应的组件名称

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

## ③将注册好的router实例添加到我们Vue的根目录之中 ##

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

## ④使用我们所注册的路由 ##

这里我们直接使用我在所配置好的组件，一个是Home和HelloWorld为所跳转的页面。

<router-link to="/">Home</router-link>的作用就是进行页面的跳转
      通过<router-link>组件的to属性来设置跳转的链接

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]  
到这里路由基本就搭建好了，页面的组件的引用在这里没有做详细的介绍。  
最后，在这里给一个小小建议，node版本6.9以上，npm版本3.0以上。

[20190524183145401.png]: /images/20220127/e93e611e28fc4972a799a9049e8b0dd8.png
[20190524183917311.png]: /images/20220127/359dd9e4f79241c88c2b7b42a52135af.png
[2019052418431843.png]: /images/20220127/c4c0f21c3b4c4959bafc19c270c9f1b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]: /images/20220127/3c3feda63d0c436f80211f45d3adfa25.png