vue路由的配置

標籤：ash   pack   講解   param   this   配置   部分   image   color   

 

一、準備工作

1安裝vue-cli  npm install vue-cli -g

 

 

2檢查是否安裝成功 vue -V(大寫V)

 

 

3初始化一個新的項目 vue init  webpack vue-demo

 進入項目目錄 npm install   npm run dev

 

 

 

二、配置路由

1我們可以看到產生的router檔案夾下面有個index.js

首先我們先在components下建立幾個組件，如HelloWorld.vue \ Home.vue    在index.js中引入 ，路由配置如下 index.js

 

import Home from ‘@/components/Home‘;
Vue.use(Router)

export default new Router({

mode:‘history‘,
  routes: [
    //預設路徑下顯示該路由
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    },{
      path: ‘/home‘,
      name: ‘Home‘,
      component: Home
    }
  ]
})

注意：在建立的 router 對象中，如果不配置 mode，就會使用預設的 hash 模式，該模式下會將路徑格式化為 #! 開頭。

添加 mode: ‘history‘ 之後將使用 HTML5 history 模式，該模式下沒有 # 首碼，而且可以使用 pushState 和 replaceState 來管理記錄。

 

2App.vue作為一個存放組件的入口容器，其中 <router-view> 是用來渲染通過路由映射過來的組件，當路徑更改時，<router-view> 中的內容也會發生更改

上面已經配置了兩個路由，當開啟 http://localhost:8080 或者 http://localhost:8080/home 的時候，就會在 <router-view> 中渲染 home.vue 組件。Home相當於是這個頁面的主介面，其他的頁面都是嵌套在這個頁面裡面的，所以有動態變化的地方都要有<router-view>，如果被嵌入的頁面部分下還有下一級頁面，則需要在一級路由中嵌套二級路由，修改router/index.js

 

 1 routes: [ 2   //預設路徑下顯示該路由 3   { 4     path: ‘/‘, 5     name: ‘home‘, 6     component: Home, 7     children:[ 8       {path:‘/‘, 9        component:Login10       }11     ]12   },{13     path: ‘/hello‘,14     name: ‘helloWorld‘,15     component: HelloWorld16   }17 ]

 

 

在配置的路由後面，添加 children，並在 children 中添加二級路由，就能實現路由嵌套

配置 path 的時候，以 " / " 開頭的嵌套路徑會被當作根路徑，所以子路由的 path 不需要添加 " / "

 

三、 使用 <router-link> 映射路由

我們在index頁面裡面加上映射路由，使其進行調轉。

首先我們在login登入加一個路由跳轉，也稱為編程式導航

this.$router.push(location) 來修改 url，完成跳轉

push 後面可以是對象，也可以是字串：

// 字串this.$router.push(‘/home/first‘)// 對象this.$router.push({ path: ‘/home/first‘ }) // 命名的路由this.$router.push({ name: ‘home‘, params: { userId: wise }})//傳參的形式

　　

 

 

然後，進入index頁面後，設定兩個router-link,在編譯之後，<router-link> 會被渲染為 <a> 標籤， to 會被渲染為 href，當 <router-link> 被點擊的時候，url 會發生相應的改變,如果對於所有 ID 各不相同的使用者，都要使用 home 組件來渲染，可以在 index.js 中添加動態參數：

這樣 "/home/user01"、"/home/user02"、"/home/user03" 等路由，都會映射到 Home 組件

然後還可以使用 $route.params.id 來擷取到對應的 id

跳轉時的傳參：

this.$router.push(`/index/${this.username}`);

路由的參數配置

{  path:‘/index/:id‘,  component:index},

　　

跳轉後的參數接收：

created(){  this.usname = this.$route.params.id; }

　　

最後，在index.vue中寫好路由跳轉router-link

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘;
import Home from ‘@/components/Home‘;
import Login from ‘@/components/Login‘;
import index from ‘@/components/index‘;
import Register from ‘@/components/Register‘;
Vue.use(Router)

export default new Router({
  mode:‘history‘,
  routes: [
    //預設路徑下顯示該路由
    {
      path: ‘/‘,
      name: ‘home‘,
      component: Home,
      children:[
        {path:‘/‘,
         component:Login
        },
        {
          path:‘/index/:id‘,
          component:index
        },
        {
          path:‘register‘,
          component:Register
        }
      ]
    },{
      path: ‘/hello‘,
      name: ‘helloWorld‘,
      component: HelloWorld
    }
  ]
})

　　

 

運行後介面

 

 

 

 

 

 

好了，今天的路由配置與跳轉就講到這裡，下次我們繼續動態路由的配置講解步驟。

vue路由的配置