vue項目中router路由配置

介紹

路由：控制組件之間的跳轉，不會實現請求、不用頁面刷新，直接跳轉-切換組件》》》

 

安裝

本地環境安裝路由插件vue-router：    cnpm install vue-router --save-dev  

 

配置

兩種配置方法：在main.js中 || 在src/router文件夾下的index.js中

這里只說在src/router/index.js中

引入：

import Vue from 'vue'
import Router from 'vue-router'

注意這個Router是自定義的名字，這里叫這個名字后，下邊都要用到的

使用/注冊：

Vue.use(Router)

配置路由：

export default new Router({
  routes: [
   {
        path : ‘/’,  //到時候地址欄會顯示的路徑
        name : ‘Home’,
        component :  Home   // Home是組件的名字，這個路由對應跳轉到的組件。。注意component沒有加“s”.
    },
    {
        path : ‘/content’,
        name : ‘Content’,
        component :  Content
    }
],
    mode: "history"
})

引入路由對應的組件地址：

import Home from '@/components/Home' 
import Home from '@/components/Content’

在main.js中調用index.js的配置： 

import router from './router'

App.vue頁面使用（展示）路由：

把這個標簽放到對應位置：  

<router-view></router-view>

路由切換（原來的<a href=”XXX.html”>等地方）：把切換標簽和鏈接改成：

<router-link  to="/">切換到Home組件</router-link>
<router-link  to="/content">切換到Content組件</router-link>

to里邊的參數和配置時，path的路徑一樣即可