vue路由router的建立

1、首先用腳手架搭建一個項目

2、使用npm下載下傳包

npm install vue-router

（不清楚的小夥伴看我前面的文章）

npm install vue-router
           

3、src目錄下建立一個router檔案夾，檔案夾中建立index.js

4、在main.js檔案中導入檔案

import router from '@/router/index.js'
import App from '@/App.vue'
并注入router
           

總的如下

import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router/index.js'

Vue.config.productionTip = false

new Vue({
  // 注入,記得要通過 router 配置參數注入路由，
  // 進而讓整個應用都有路由功能
  router,
  render: h => h(App)
}).$mount('#app')

           

5、在剛才建立的index.js中，建立路由子產品

// 1.引入vue和vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入路由所映射的元件
import Index from '@/views/Index.vue'
// 挂載：讓Vue使用VueRouter進行路由管理
Vue.use(VueRouter)

// 2.建立路由對象
var router = new VueRouter({
  // 3.配置路由，通過routes配置路由,它是一個數組，裡面的每一個成員都是一個單獨的路由對象
  routes: [
    // 4.配置具體的路由，一般來說有如下的幾個參數
    // path:路由路徑，以後這個值就是url的值
    // name:路由的名稱
    // component:目前路由所映射的元件，它是一個元件對象，絕對不要寫成字元串
    {
      name: 'index',
      path: '/index',
      component: Index
    }
  ]
})

// 暴露
export default router
           

6、在views中建立你的vue檔案

注意要加入

<router-view></router-view>

<template>
  <div id="app">
      <h1>我是app</h1>
      <!-- 添加路由映射的元件的展示區域，一定要設定展示區域，否則元件内容并不可見 -->
      <router-view></router-view>
  </div>
</template>
           

7、最後在你的主檔案App.vue中加傳入連結接

<template>
  <div id="app">
    <!-- 一定要設定to屬性，它就可以設定為你想跳轉的路由的path -->
    <router-link to="/index">首頁</router-link> &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/product">産品</router-link>
    <!-- <a href="#/product">産品</a> -->
    <!-- 添加路由映射的元件的展示區域，一定要設定展示區域，否則元件内容并不可見 -->
    <router-view></router-view>
  </div>
</template>