Vue入坑——vue-router（vue路由）入门

上一篇：vue-cli目录结构认识

一块儿学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

前言

学这篇以前要先有的基础是vue-cli哦，否则不怎么看得懂哦。

安装vue-router

还记得以前再安装vue-cli的时候就用命令行安装过了vue-router，因此我就不用再在这个项目里安装了。

要单独安装的小伙伴先进入你的项目目录，再打开命令行，输入：npm install vue-router --save-dev

index.js

来看一下router文件夹下的index.js

从这里咱们知道了，将vue组件添加到这里面就能够了。

这里解释一下那个path，就是咱们在url地址栏里看到的#号后面那个斜杠

自定义组件

vue，是写单页面应用的，所以一个vue就是一个页面。清楚了上面的逻辑，如今咱们本身写一个vue组件，取名叫hellovue.vue，在components文件夹下面。

一、新建文件hellovue.vue

二、hellovue.vue进行编码

以前咱们有学过，在vue里面，有三部分构成，template、script、style

三、在index.js里引入

四、在index.js里配置

五、运行一下试试看

命令行:npm run dev

浏览器:http://localhost:8080/#/hellovue

 

制做导航栏

如今咱们要切换页面的话，就是修改浏览器中的地址，那么，有什么便捷的方法呢？

router-link

导航连接，就像咱们使用a来跳转页面同样

一、先看看他的语法

<router-link to="xxx">点击我跳转</router-link>

to后面是路径，这个路径填的就是在index.js里面配置路由的时候填的那个path

二、添加新的组件mycenter.vue

<template>
  <div>
    <p>name:{{name}}</p>
    <p>age:{{age}}</p>
    <p>address:{{address}}</p>
  </div>
</template>
<script>
  export default {
    name:'mycenter',
    data(){
    return {
      name:'vuecat',
      age:2,
      address:'sctu'
    }
    }
  }
</script>
<style scoped>
p{color: rgb(148, 96, 235);}
</style>

像上面添加hellovue..vue同样，也是那种页面结构

三、在index.js里引入和配置

四、修改App.vue

五、运行

结语

看完这篇，基本的路由知识就知道了，也知道怎么跳转了，下一篇，就开始学习子路由。

——————————^~^我是萌萌哒分割线^~^————————————————

                                                                                                      下一篇：vue-router配置子路由