Vue--配置路由步骤 - Go语言中文社区

Vue--配置路由步骤

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

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

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

npm vue-router --save-dev

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

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

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

在这里插入图片描述

使用路由模块

Vue.use(VueRouter)

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

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

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

在这里插入图片描述

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

在这里插入图片描述

④使用我们所注册的路由

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

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

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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45122120/article/details/90521551
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！