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配置子路由