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的路徑一樣即可

介紹

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

安裝

本地環境安裝路由外掛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的路徑一樣即可